{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "Item", "dependencies": [ "@base-ui/react", "cn", "rescript-base-ui" ], "files": [ { "path": "registry/base/ui/Item.res", "content": "@@jsxConfig({version: 4, mode: \"automatic\", module_: \"BaseUi.BaseUiJsxDOM\"})\n\nopen BaseUi.Types\n\n@module(\"cn\")\nexternal cn: (string, option) => string = \"cn\"\n\nmodule Variant = {\n @unboxed\n type t =\n | @as(\"default\") Default\n | @as(\"outline\") Outline\n | @as(\"muted\") Muted\n}\n\nmodule Size = {\n @unboxed\n type t =\n | @as(\"default\") Default\n | @as(\"sm\") Sm\n | @as(\"xs\") Xs\n}\n\nlet itemVariants = (~variant=Variant.Default, ~size=Size.Default) => {\n let base = \"[a]:hover:bg-muted rounded-lg border text-sm w-full group/item focus-visible:border-ring focus-visible:ring-ring/50 flex items-center flex-wrap outline-none transition-colors duration-100 focus-visible:ring-[3px] [a]:transition-colors\"\n let variantClass = switch variant {\n | Outline => \"border-border\"\n | Muted => \"bg-muted/50 border-transparent\"\n | Default => \"border-transparent\"\n }\n let sizeClass = switch size {\n | Sm => \"gap-2.5 px-3 py-2.5\"\n | Xs => \"gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0\"\n | Default => \"gap-2.5 px-3 py-2.5\"\n }\n `${base} ${variantClass} ${sizeClass}`\n}\n\ntype state = {\n slot: string,\n variant: Variant.t,\n size: Size.t,\n}\n\ntype props = {\n variant?: Variant.t,\n size?: Size.t,\n ...BaseUi.Types.BaseUIComponentProps.t,\n}\n\nlet toDomProps: props => BaseUi.Types.DomProps.t = %raw(`({className, render, variant, size, ...props}) => props`)\n\n@react.componentWithProps(props)\nlet make = (props: props) => {\n let variant = props.variant->Option.getOr(Variant.Default)\n let size = props.size->Option.getOr(Size.Default)\n\n BaseUi.Render.use({\n defaultTagName: \"div\",\n render: ?props.render,\n props: BaseUi.Render.mergeProps(\n {className: cn(itemVariants(~variant, ~size), props.className)},\n toDomProps(props),\n ),\n state: {\n slot: \"item\",\n variant,\n size,\n },\n })\n}\n\nmodule Media = {\n module Variant = {\n @unboxed\n type t =\n | @as(\"default\") Default\n | @as(\"icon\") Icon\n | @as(\"image\") Image\n }\n\n let itemMediaVariants = (~variant=Variant.Default) => {\n let base = \"gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none\"\n let variantClass = switch variant {\n | Icon => \"[&_svg:not([class*='size-'])]:size-4\"\n | Image => \"size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover\"\n | Default => \"bg-transparent\"\n }\n `${base} ${variantClass}`\n }\n\n type props = {\n ...BaseUi.Types.DomProps.t,\n variant?: Variant.t,\n }\n\n let toBaseUiProps: props => BaseUi.Types.DomProps.t = %raw(`({variant, ...props}) => props`)\n\n @react.componentWithProps(props)\n let make = (props: props) => {\n let variant = props.variant->Option.getOr(Variant.Default)\n toBaseUiProps}\n dataSlot={props.dataSlot->Option.getOr(\"item-media\")}\n dataVariant={props.dataVariant->Option.getOr((variant :> string))}\n className={cn(itemMediaVariants(~variant), props.className)}\n />\n }\n}\n\nmodule Content = {\n @react.componentWithProps(BaseUi.Types.DomProps.t)\n let make = (props: BaseUi.Types.DomProps.t) =>\n Option.getOr(\"item-content\")}\n className={cn(\n \"gap-1 group-data-[size=xs]/item:gap-0 flex flex-1 flex-col [&+[data-slot=item-content]]:flex-none\",\n props.className,\n )}\n />\n}\n\nmodule Actions = {\n @react.componentWithProps(BaseUi.Types.DomProps.t)\n let make = (props: BaseUi.Types.DomProps.t) =>\n Option.getOr(\"item-actions\")}\n className={cn(\"gap-2 flex items-center\", props.className)}\n />\n}\n\nmodule Group = {\n @react.componentWithProps(BaseUi.Types.DomProps.t)\n let make = (props: BaseUi.Types.DomProps.t) => {\n let role = props.role->Option.getOr(\"list\")\n Option.getOr(\"item-group\")}\n className={cn(\n \"gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2 group/item-group flex w-full flex-col\",\n props.className,\n )}\n />\n }\n}\n\nmodule Separator = {\n @react.componentWithProps(BaseUi.Types.BaseUIComponentProps.t)\n let make = (props: BaseUi.Types.BaseUIComponentProps.t) =>\n Option.getOr(\"item-separator\")}\n orientation={props.orientation->Option.getOr(Orientation.Horizontal)}\n className={cn(\"my-2\", props.className)}\n />\n}\n\nmodule Title = {\n @react.componentWithProps(BaseUi.Types.DomProps.t)\n let make = (props: BaseUi.Types.DomProps.t) =>\n Option.getOr(\"item-title\")}\n className={cn(\n \"gap-2 text-sm leading-snug font-medium underline-offset-4 line-clamp-1 flex w-fit items-center\",\n props.className,\n )}\n />\n}\n\nmodule Description = {\n @react.componentWithProps(BaseUi.Types.DomProps.t)\n let make = (props: BaseUi.Types.DomProps.t) =>\n Option.getOr(\"item-description\")}\n className={cn(\n \"text-muted-foreground text-left text-sm leading-normal group-data-[size=xs]/item:text-xs [&>a:hover]:text-primary line-clamp-2 font-normal [&>a]:underline [&>a]:underline-offset-4\",\n props.className,\n )}\n />\n}\n\nmodule Header = {\n @react.componentWithProps(BaseUi.Types.DomProps.t)\n let make = (props: BaseUi.Types.DomProps.t) =>\n Option.getOr(\"item-header\")}\n className={cn(\"gap-2 flex basis-full items-center justify-between\", props.className)}\n />\n}\n\nmodule Footer = {\n @react.componentWithProps(BaseUi.Types.DomProps.t)\n let make = (props: BaseUi.Types.DomProps.t) =>\n Option.getOr(\"item-footer\")}\n className={cn(\"gap-2 flex basis-full items-center justify-between\", props.className)}\n />\n}\n", "type": "registry:file", "target": "@ui/Item.res" } ], "type": "registry:ui" }