@epilot/volt-ui-experimental-griffel 0.2.3 → 0.3.0

package/dist/components/command/command.js.map

@@ -1 +1 @@
-{"version":3,"file":"command.js","sources":["../../../src/components/command/command.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\nimport { mergeClasses, shorthands } from \"@epilot/volt-ui-runtime\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"../dialog/dialog\"\n\nconst SearchIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 -960 960 960\"\n    width=\"24px\"\n    fill=\"currentColor\"\n    {...props}\n  >\n    <path d=\"M380-320q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l224 224q11 11 11 28t-11 28q-11 11-28 11t-28-11L532-372q-30 24-69 38t-83 14Zm0-80q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z\" />\n  </svg>\n)\n\nconst useStyles = makeVoltStyles({\n  root: {\n    backgroundColor: tokens.body,\n    color: tokens.grayA12,\n    display: \"flex\",\n    height: \"100%\",\n    width: \"100%\",\n    flexDirection: \"column\",\n    overflowX: \"hidden\",\n    overflowY: \"hidden\",\n    ...shorthands.borderRadius(tokens.radiusMd),\n  },\n  inputWrapper: {\n    display: \"flex\",\n    alignItems: \"center\",\n    ...shorthands.gap(tokens.spacingElement2),\n    ...shorthands.borderBottom(\"1px\", \"solid\", tokens.grayA3),\n    paddingLeft: tokens.spacingElement3,\n    paddingRight: tokens.spacingElement3,\n  },\n  searchIcon: {\n    width: \"1.25rem\",\n    height: \"1.25rem\",\n    flexShrink: 0,\n    opacity: 0.5,\n  },\n  input: {\n    height: \"3rem\",\n    display: \"flex\",\n    width: \"100%\",\n    ...shorthands.borderRadius(tokens.radiusMd),\n    backgroundColor: \"transparent\",\n    paddingTop: tokens.spacingElement3,\n    paddingBottom: tokens.spacingElement3,\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n    outlineStyle: \"none\",\n    \"::placeholder\": {\n      color: tokens.grayA11,\n    },\n    \":disabled\": {\n      cursor: \"not-allowed\",\n      opacity: 0.5,\n    },\n  },\n  list: {\n    overflowX: \"hidden\",\n    overflowY: \"auto\",\n    scrollPaddingTop: tokens.spacingElement1,\n    scrollPaddingBottom: tokens.spacingElement1,\n  },\n  empty: {\n    paddingTop: \"1.5rem\",\n    paddingBottom: \"1.5rem\",\n    textAlign: \"center\",\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n    color: tokens.grayA11,\n  },\n  group: {\n    color: tokens.grayA12,\n    overflowX: \"hidden\",\n    overflowY: \"hidden\",\n    ...shorthands.padding(tokens.spacingElement1),\n    \"& [cmdk-group-heading]\": {\n      color: tokens.grayA11,\n      paddingLeft: tokens.spacingElement2,\n      paddingRight: tokens.spacingElement2,\n      paddingTop: \"0.375rem\",\n      paddingBottom: \"0.375rem\",\n      fontSize: tokens.textXs,\n      lineHeight: tokens.leadingXs,\n      fontWeight: tokens.fontWeightMedium,\n    },\n  },\n  separator: {\n    backgroundColor: tokens.semGraySoft,\n    marginLeft: `calc(-1 * ${tokens.spacingElement1})`,\n    marginRight: `calc(-1 * ${tokens.spacingElement1})`,\n    height: \"1px\",\n  },\n  item: {\n    position: \"relative\",\n    display: \"flex\",\n    cursor: \"default\",\n    alignItems: \"center\",\n    ...shorthands.gap(tokens.spacingElement2),\n    ...shorthands.borderRadius(tokens.radiusSm),\n    paddingLeft: tokens.spacingElement2,\n    paddingRight: tokens.spacingElement2,\n    paddingTop: \"0.375rem\",\n    paddingBottom: \"0.375rem\",\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n    outlineStyle: \"none\",\n    userSelect: \"none\",\n    color: tokens.grayA12,\n    \"&[data-selected='true'], &[aria-selected='true']\": {\n      backgroundColor: tokens.accentA3,\n    },\n    \":hover\": {\n      backgroundColor: tokens.accentA3,\n    },\n    \"&[data-disabled='true'], &[aria-disabled='true']\": {\n      pointerEvents: \"none\",\n      opacity: 0.5,\n    },\n    \"& svg\": {\n      pointerEvents: \"none\",\n      flexShrink: 0,\n      width: \"1rem\",\n      height: \"1rem\",\n    },\n    \"& svg:not([class*='text-'])\": {\n      color: tokens.grayA11,\n    },\n  },\n  shortcut: {\n    color: tokens.grayA11,\n    marginLeft: \"auto\",\n    fontSize: tokens.textXs,\n    lineHeight: tokens.leadingXs,\n    letterSpacing: \"0.1em\",\n  },\n  loading: {\n    color: tokens.grayA11,\n  },\n  dialogContent: {\n    overflowX: \"hidden\",\n    overflowY: \"hidden\",\n    ...shorthands.padding(0),\n  },\n  dialogCommand: {\n    \"& [cmdk-group-heading]\": {\n      color: tokens.grayA11,\n      paddingLeft: tokens.spacingElement2,\n      paddingRight: tokens.spacingElement2,\n      fontWeight: tokens.fontWeightMedium,\n    },\n    [`& [${SLOT_ATTR}=\"command-input-wrapper\"]`]: {\n      height: \"3rem\",\n    },\n    \"& [cmdk-group]\": {\n      paddingLeft: tokens.spacingElement2,\n      paddingRight: tokens.spacingElement2,\n    },\n    \"& [cmdk-item]\": {\n      paddingLeft: tokens.spacingElement2,\n      paddingRight: tokens.spacingElement2,\n      paddingTop: tokens.spacingElement3,\n      paddingBottom: tokens.spacingElement3,\n    },\n    \"& [cmdk-item] svg\": {\n      width: \"1.25rem\",\n      height: \"1.25rem\",\n    },\n    \"& [cmdk-input-wrapper] svg\": {\n      width: \"1.25rem\",\n      height: \"1.25rem\",\n    },\n    \"& [cmdk-input]\": {\n      height: \"3rem\",\n    },\n  },\n  srOnly: {\n    position: \"absolute\",\n    width: \"1px\",\n    height: \"1px\",\n    paddingTop: 0,\n    paddingBottom: 0,\n    paddingLeft: 0,\n    paddingRight: 0,\n    marginTop: \"-1px\",\n    marginBottom: \"-1px\",\n    marginLeft: \"-1px\",\n    marginRight: \"-1px\",\n    overflowX: \"hidden\",\n    overflowY: \"hidden\",\n    clip: \"rect(0, 0, 0, 0)\",\n    whiteSpace: \"nowrap\",\n    ...shorthands.borderWidth(0),\n  },\n})\n\nexport type CommandProps = React.ComponentProps<typeof CommandPrimitive> & {\n  \"data-slot\"?: string\n}\n\nexport const Command = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive>,\n  CommandProps\n>(function Command(\n  { className, \"data-slot\": dataSlot = \"command\", ...props },\n  ref\n) {\n  const styles = useStyles()\n\n  return (\n    <CommandPrimitive\n      ref={ref}\n      data-slot={dataSlot}\n      {...{ [SLOT_ATTR]: dataSlot }}\n      className={mergeClasses(styles.root, className)}\n      {...props}\n    />\n  )\n})\n\nexport type CommandDialogProps = Omit<\n  React.ComponentProps<typeof Dialog>,\n  \"children\"\n> & {\n  children?: React.ReactNode\n  title?: string\n  description?: string\n  className?: string\n  showCloseButton?: boolean\n}\n\nexport const CommandDialog = React.forwardRef<HTMLElement, CommandDialogProps>(\n  function CommandDialog(\n    {\n      title = \"Command Palette\",\n      description = \"Search for a command to run...\",\n      children,\n      className,\n      showCloseButton = true,\n      ...props\n    },\n    _ref\n  ) {\n    const styles = useStyles()\n\n    return (\n      <Dialog {...props}>\n        <DialogHeader className={styles.srOnly}>\n          <DialogTitle>{title}</DialogTitle>\n          <DialogDescription>{description}</DialogDescription>\n        </DialogHeader>\n        <DialogContent\n          className={mergeClasses(styles.dialogContent, className)}\n          showCloseButton={showCloseButton}\n        >\n          <Command className={styles.dialogCommand}>{children}</Command>\n        </DialogContent>\n      </Dialog>\n    )\n  }\n)\n\nexport type CommandInputProps = React.ComponentProps<\n  typeof CommandPrimitive.Input\n> & {\n  wrapperClassName?: string\n}\n\nexport const CommandInput = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Input>,\n  CommandInputProps\n>(function CommandInput({ className, wrapperClassName, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <div\n      data-slot=\"command-input-wrapper\"\n      {...{ [SLOT_ATTR]: \"command-input-wrapper\" }}\n      className={mergeClasses(styles.inputWrapper, wrapperClassName)}\n    >\n      <SearchIcon className={styles.searchIcon} />\n      <CommandPrimitive.Input\n        ref={ref}\n        data-slot=\"command-input\"\n        {...{ [SLOT_ATTR]: \"command-input\" }}\n        className={mergeClasses(styles.input, className)}\n        {...props}\n      />\n    </div>\n  )\n})\n\nexport type CommandListProps = React.ComponentProps<\n  typeof CommandPrimitive.List\n>\n\nexport const CommandList = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.List>,\n  CommandListProps\n>(function CommandList({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <CommandPrimitive.List\n      ref={ref}\n      data-slot=\"command-list\"\n      {...{ [SLOT_ATTR]: \"command-list\" }}\n      className={mergeClasses(styles.list, className)}\n      {...props}\n    />\n  )\n})\n\nexport type CommandEmptyProps = React.ComponentProps<\n  typeof CommandPrimitive.Empty\n>\n\nexport const CommandEmpty = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Empty>,\n  CommandEmptyProps\n>(function CommandEmpty({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <CommandPrimitive.Empty\n      ref={ref}\n      data-slot=\"command-empty\"\n      {...{ [SLOT_ATTR]: \"command-empty\" }}\n      className={mergeClasses(styles.empty, className)}\n      {...props}\n    />\n  )\n})\n\nexport type CommandGroupProps = React.ComponentProps<\n  typeof CommandPrimitive.Group\n>\n\nexport const CommandGroup = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Group>,\n  CommandGroupProps\n>(function CommandGroup({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <CommandPrimitive.Group\n      ref={ref}\n      data-slot=\"command-group\"\n      {...{ [SLOT_ATTR]: \"command-group\" }}\n      className={mergeClasses(styles.group, className)}\n      {...props}\n    />\n  )\n})\n\nexport type CommandSeparatorProps = React.ComponentProps<\n  typeof CommandPrimitive.Separator\n>\n\nexport const CommandSeparator = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Separator>,\n  CommandSeparatorProps\n>(function CommandSeparator({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <CommandPrimitive.Separator\n      ref={ref}\n      data-slot=\"command-separator\"\n      {...{ [SLOT_ATTR]: \"command-separator\" }}\n      className={mergeClasses(styles.separator, className)}\n      {...props}\n    />\n  )\n})\n\nexport type CommandItemProps = React.ComponentProps<\n  typeof CommandPrimitive.Item\n>\n\nexport const CommandItem = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Item>,\n  CommandItemProps\n>(function CommandItem({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <CommandPrimitive.Item\n      ref={ref}\n      data-slot=\"command-item\"\n      {...{ [SLOT_ATTR]: \"command-item\" }}\n      className={mergeClasses(styles.item, className)}\n      {...props}\n    />\n  )\n})\n\nexport type CommandShortcutProps = React.ComponentProps<\"span\">\n\nexport const CommandShortcut = React.forwardRef<\n  HTMLSpanElement,\n  CommandShortcutProps\n>(function CommandShortcut({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <span\n      ref={ref}\n      data-slot=\"command-shortcut\"\n      {...{ [SLOT_ATTR]: \"command-shortcut\" }}\n      className={mergeClasses(styles.shortcut, className)}\n      {...props}\n    />\n  )\n})\n\nexport type CommandLoadingProps = React.ComponentProps<\n  typeof CommandPrimitive.Loading\n>\n\nexport const CommandLoading = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Loading>,\n  CommandLoadingProps\n>(function CommandLoading({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <CommandPrimitive.Loading\n      ref={ref}\n      data-slot=\"command-loading\"\n      {...{ [SLOT_ATTR]: \"command-loading\" }}\n      className={mergeClasses(styles.loading, className)}\n      {...props}\n    />\n  )\n})\n\nexport { Command as CommandRoot }\n"],"names":["SearchIcon","props","jsx","useStyles","makeVoltStyles","tokens.body","tokens.grayA12","shorthands","tokens.radiusMd","tokens.spacingElement2","tokens.grayA3","tokens.spacingElement3","tokens.textSm","tokens.leadingSm","tokens.grayA11","tokens.spacingElement1","tokens.textXs","tokens.leadingXs","tokens.fontWeightMedium","tokens.semGraySoft","tokens.radiusSm","tokens.accentA3","SLOT_ATTR","Command","React","className","dataSlot","ref","styles","CommandPrimitive","mergeClasses","title","description","children","showCloseButton","_ref","jsxs","Dialog","DialogHeader","DialogTitle","DialogDescription","DialogContent","CommandInput","wrapperClassName","CommandList","CommandEmpty","CommandGroup","CommandSeparator","CommandItem","CommandLoading"],"mappings":"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"}
+{"version":3,"file":"command.js","sources":["../../../src/components/command/command.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\nimport { mergeClasses, shorthands } from \"@epilot/volt-ui-runtime\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"../dialog/dialog\"\n\nconst SearchIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 -960 960 960\"\n    width=\"24px\"\n    fill=\"currentColor\"\n    {...props}\n  >\n    <path d=\"M380-320q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l224 224q11 11 11 28t-11 28q-11 11-28 11t-28-11L532-372q-30 24-69 38t-83 14Zm0-80q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z\" />\n  </svg>\n)\n\nconst useStyles = makeVoltStyles({\n  root: {\n    backgroundColor: tokens.body,\n    color: tokens.grayA12,\n    display: \"flex\",\n    height: \"100%\",\n    width: \"100%\",\n    flexDirection: \"column\",\n    overflowX: \"hidden\",\n    overflowY: \"hidden\",\n    ...shorthands.borderRadius(tokens.radiusMd),\n  },\n  inputWrapper: {\n    display: \"flex\",\n    alignItems: \"center\",\n    ...shorthands.gap(tokens.spacingElement2),\n    ...shorthands.borderBottom(\"1px\", \"solid\", tokens.grayA3),\n    paddingLeft: tokens.spacingElement3,\n    paddingRight: tokens.spacingElement3,\n  },\n  searchIcon: {\n    width: \"1.25rem\",\n    height: \"1.25rem\",\n    flexShrink: 0,\n    opacity: 0.5,\n  },\n  input: {\n    height: \"3rem\",\n    display: \"flex\",\n    width: \"100%\",\n    ...shorthands.borderRadius(tokens.radiusMd),\n    backgroundColor: \"transparent\",\n    paddingTop: tokens.spacingElement3,\n    paddingBottom: tokens.spacingElement3,\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n    outlineStyle: \"none\",\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      // Inset (negative), not the outward +2px every other audited control uses: this input sits\n      // flush against the top edge of the Command root, which clips overflow for its rounded\n      // corners. An outward ring's top 4px (width + offset) render outside that clip box and are\n      // cut off — confirmed by measuring the rendered outline rect against the clipping ancestor's\n      // rect (COBALT-REVIEW-2.md §2). Insetting keeps the ring's outer edge at the input's own\n      // border edge, so it doesn't extend past this ancestor's clip box in this layout (it is not\n      // a universal guarantee against every possible ancestor — an ancestor that clips the input's\n      // OWN box, not just what extends beyond it, would still hide it). No layout change either\n      // way: outline never affects box model regardless of sign.\n      outlineOffset: \"-2px\",\n      outlineColor: tokens.semFocusRing,\n    },\n    \"::placeholder\": {\n      color: tokens.grayA11,\n    },\n    \":disabled\": {\n      cursor: \"not-allowed\",\n      opacity: 0.5,\n    },\n  },\n  list: {\n    overflowX: \"hidden\",\n    overflowY: \"auto\",\n    scrollPaddingTop: tokens.spacingElement1,\n    scrollPaddingBottom: tokens.spacingElement1,\n  },\n  empty: {\n    paddingTop: \"1.5rem\",\n    paddingBottom: \"1.5rem\",\n    textAlign: \"center\",\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n    color: tokens.grayA11,\n  },\n  group: {\n    color: tokens.grayA12,\n    overflowX: \"hidden\",\n    overflowY: \"hidden\",\n    ...shorthands.padding(tokens.spacingElement1),\n    \"& [cmdk-group-heading]\": {\n      color: tokens.grayA11,\n      paddingLeft: tokens.spacingElement2,\n      paddingRight: tokens.spacingElement2,\n      paddingTop: \"0.375rem\",\n      paddingBottom: \"0.375rem\",\n      fontSize: tokens.textXs,\n      lineHeight: tokens.leadingXs,\n      fontWeight: tokens.fontWeightMedium,\n    },\n  },\n  separator: {\n    backgroundColor: tokens.semGraySoft,\n    marginLeft: `calc(-1 * ${tokens.spacingElement1})`,\n    marginRight: `calc(-1 * ${tokens.spacingElement1})`,\n    height: \"1px\",\n  },\n  item: {\n    position: \"relative\",\n    display: \"flex\",\n    cursor: \"default\",\n    alignItems: \"center\",\n    ...shorthands.gap(tokens.spacingElement2),\n    ...shorthands.borderRadius(tokens.radiusSm),\n    paddingLeft: tokens.spacingElement2,\n    paddingRight: tokens.spacingElement2,\n    paddingTop: \"0.375rem\",\n    paddingBottom: \"0.375rem\",\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n    outlineStyle: \"none\",\n    userSelect: \"none\",\n    color: tokens.grayA12,\n    \"&[data-selected='true'], &[aria-selected='true']\": {\n      backgroundColor: tokens.accentA3,\n    },\n    \":hover\": {\n      backgroundColor: tokens.accentA3,\n    },\n    \"&[data-disabled='true'], &[aria-disabled='true']\": {\n      pointerEvents: \"none\",\n      opacity: 0.5,\n    },\n    \"& svg\": {\n      pointerEvents: \"none\",\n      flexShrink: 0,\n      width: \"1rem\",\n      height: \"1rem\",\n    },\n    \"& svg:not([class*='text-'])\": {\n      color: tokens.grayA11,\n    },\n  },\n  shortcut: {\n    color: tokens.grayA11,\n    marginLeft: \"auto\",\n    fontSize: tokens.textXs,\n    lineHeight: tokens.leadingXs,\n    letterSpacing: \"0.1em\",\n  },\n  loading: {\n    color: tokens.grayA11,\n  },\n  dialogContent: {\n    overflowX: \"hidden\",\n    overflowY: \"hidden\",\n    ...shorthands.padding(0),\n  },\n  dialogCommand: {\n    \"& [cmdk-group-heading]\": {\n      color: tokens.grayA11,\n      paddingLeft: tokens.spacingElement2,\n      paddingRight: tokens.spacingElement2,\n      fontWeight: tokens.fontWeightMedium,\n    },\n    [`& [${SLOT_ATTR}=\"command-input-wrapper\"]`]: {\n      height: \"3rem\",\n    },\n    \"& [cmdk-group]\": {\n      paddingLeft: tokens.spacingElement2,\n      paddingRight: tokens.spacingElement2,\n    },\n    \"& [cmdk-item]\": {\n      paddingLeft: tokens.spacingElement2,\n      paddingRight: tokens.spacingElement2,\n      paddingTop: tokens.spacingElement3,\n      paddingBottom: tokens.spacingElement3,\n    },\n    \"& [cmdk-item] svg\": {\n      width: \"1.25rem\",\n      height: \"1.25rem\",\n    },\n    \"& [cmdk-input-wrapper] svg\": {\n      width: \"1.25rem\",\n      height: \"1.25rem\",\n    },\n    \"& [cmdk-input]\": {\n      height: \"3rem\",\n    },\n  },\n  srOnly: {\n    position: \"absolute\",\n    width: \"1px\",\n    height: \"1px\",\n    paddingTop: 0,\n    paddingBottom: 0,\n    paddingLeft: 0,\n    paddingRight: 0,\n    marginTop: \"-1px\",\n    marginBottom: \"-1px\",\n    marginLeft: \"-1px\",\n    marginRight: \"-1px\",\n    overflowX: \"hidden\",\n    overflowY: \"hidden\",\n    clip: \"rect(0, 0, 0, 0)\",\n    whiteSpace: \"nowrap\",\n    ...shorthands.borderWidth(0),\n  },\n})\n\nexport type CommandProps = React.ComponentProps<typeof CommandPrimitive> & {\n  \"data-slot\"?: string\n}\n\nexport const Command = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive>,\n  CommandProps\n>(function Command(\n  { className, \"data-slot\": dataSlot = \"command\", ...props },\n  ref\n) {\n  const styles = useStyles()\n\n  return (\n    <CommandPrimitive\n      ref={ref}\n      data-slot={dataSlot}\n      {...{ [SLOT_ATTR]: dataSlot }}\n      className={mergeClasses(styles.root, className)}\n      {...props}\n    />\n  )\n})\n\nexport type CommandDialogProps = Omit<\n  React.ComponentProps<typeof Dialog>,\n  \"children\"\n> & {\n  children?: React.ReactNode\n  title?: string\n  description?: string\n  className?: string\n  showCloseButton?: boolean\n}\n\nexport const CommandDialog = React.forwardRef<HTMLElement, CommandDialogProps>(\n  function CommandDialog(\n    {\n      title = \"Command Palette\",\n      description = \"Search for a command to run...\",\n      children,\n      className,\n      showCloseButton = true,\n      ...props\n    },\n    _ref\n  ) {\n    const styles = useStyles()\n\n    return (\n      <Dialog {...props}>\n        <DialogHeader className={styles.srOnly}>\n          <DialogTitle>{title}</DialogTitle>\n          <DialogDescription>{description}</DialogDescription>\n        </DialogHeader>\n        <DialogContent\n          className={mergeClasses(styles.dialogContent, className)}\n          showCloseButton={showCloseButton}\n        >\n          <Command className={styles.dialogCommand}>{children}</Command>\n        </DialogContent>\n      </Dialog>\n    )\n  }\n)\n\nexport type CommandInputProps = React.ComponentProps<\n  typeof CommandPrimitive.Input\n> & {\n  wrapperClassName?: string\n}\n\nexport const CommandInput = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Input>,\n  CommandInputProps\n>(function CommandInput({ className, wrapperClassName, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <div\n      data-slot=\"command-input-wrapper\"\n      {...{ [SLOT_ATTR]: \"command-input-wrapper\" }}\n      className={mergeClasses(styles.inputWrapper, wrapperClassName)}\n    >\n      <SearchIcon className={styles.searchIcon} />\n      <CommandPrimitive.Input\n        ref={ref}\n        data-slot=\"command-input\"\n        {...{ [SLOT_ATTR]: \"command-input\" }}\n        className={mergeClasses(styles.input, className)}\n        {...props}\n      />\n    </div>\n  )\n})\n\nexport type CommandListProps = React.ComponentProps<\n  typeof CommandPrimitive.List\n>\n\nexport const CommandList = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.List>,\n  CommandListProps\n>(function CommandList({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <CommandPrimitive.List\n      ref={ref}\n      data-slot=\"command-list\"\n      {...{ [SLOT_ATTR]: \"command-list\" }}\n      className={mergeClasses(styles.list, className)}\n      {...props}\n    />\n  )\n})\n\nexport type CommandEmptyProps = React.ComponentProps<\n  typeof CommandPrimitive.Empty\n>\n\nexport const CommandEmpty = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Empty>,\n  CommandEmptyProps\n>(function CommandEmpty({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <CommandPrimitive.Empty\n      ref={ref}\n      data-slot=\"command-empty\"\n      {...{ [SLOT_ATTR]: \"command-empty\" }}\n      className={mergeClasses(styles.empty, className)}\n      {...props}\n    />\n  )\n})\n\nexport type CommandGroupProps = React.ComponentProps<\n  typeof CommandPrimitive.Group\n>\n\nexport const CommandGroup = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Group>,\n  CommandGroupProps\n>(function CommandGroup({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <CommandPrimitive.Group\n      ref={ref}\n      data-slot=\"command-group\"\n      {...{ [SLOT_ATTR]: \"command-group\" }}\n      className={mergeClasses(styles.group, className)}\n      {...props}\n    />\n  )\n})\n\nexport type CommandSeparatorProps = React.ComponentProps<\n  typeof CommandPrimitive.Separator\n>\n\nexport const CommandSeparator = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Separator>,\n  CommandSeparatorProps\n>(function CommandSeparator({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <CommandPrimitive.Separator\n      ref={ref}\n      data-slot=\"command-separator\"\n      {...{ [SLOT_ATTR]: \"command-separator\" }}\n      className={mergeClasses(styles.separator, className)}\n      {...props}\n    />\n  )\n})\n\nexport type CommandItemProps = React.ComponentProps<\n  typeof CommandPrimitive.Item\n>\n\nexport const CommandItem = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Item>,\n  CommandItemProps\n>(function CommandItem({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <CommandPrimitive.Item\n      ref={ref}\n      data-slot=\"command-item\"\n      {...{ [SLOT_ATTR]: \"command-item\" }}\n      className={mergeClasses(styles.item, className)}\n      {...props}\n    />\n  )\n})\n\nexport type CommandShortcutProps = React.ComponentProps<\"span\">\n\nexport const CommandShortcut = React.forwardRef<\n  HTMLSpanElement,\n  CommandShortcutProps\n>(function CommandShortcut({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <span\n      ref={ref}\n      data-slot=\"command-shortcut\"\n      {...{ [SLOT_ATTR]: \"command-shortcut\" }}\n      className={mergeClasses(styles.shortcut, className)}\n      {...props}\n    />\n  )\n})\n\nexport type CommandLoadingProps = React.ComponentProps<\n  typeof CommandPrimitive.Loading\n>\n\nexport const CommandLoading = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Loading>,\n  CommandLoadingProps\n>(function CommandLoading({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <CommandPrimitive.Loading\n      ref={ref}\n      data-slot=\"command-loading\"\n      {...{ [SLOT_ATTR]: \"command-loading\" }}\n      className={mergeClasses(styles.loading, className)}\n      {...props}\n    />\n  )\n})\n\nexport { Command as CommandRoot }\n"],"names":["SearchIcon","props","jsxDEV","this","useStyles","makeVoltStyles","tokens.body","tokens.grayA12","shorthands","tokens.radiusMd","tokens.spacingElement2","tokens.grayA3","tokens.spacingElement3","tokens.textSm","tokens.leadingSm","tokens.semFocusRing","tokens.grayA11","tokens.spacingElement1","tokens.textXs","tokens.leadingXs","tokens.fontWeightMedium","tokens.semGraySoft","tokens.radiusSm","tokens.accentA3","SLOT_ATTR","Command","React","className","dataSlot","ref","styles","CommandPrimitive","mergeClasses","title","description","children","showCloseButton","_ref","Dialog","DialogHeader","DialogTitle","DialogDescription","DialogContent","CommandInput","wrapperClassName","CommandList","CommandEmpty","CommandGroup","CommandSeparator","CommandItem","CommandLoading"],"mappings":"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"}

package/dist/components/data-table/data-table-body.js

@@ -1,84 +1,144 @@
-import { jsx as a } from "react/jsx-runtime";
-import * as h from "react";
-import { makeVoltStyles as D } from "../../styles/make-styles.js";
-import { grayA11 as g } from "../../tokens/index.js";
-import { TableBody as o, TableRow as B, TableCell as w } from "../table/table.js";
-import { DataTableRow as v } from "./data-table-row.js";
-import { DataTableLoading as C } from "./data-table-loading.js";
-import { useDataTable as R } from "./hooks/use-data-table.js";
-import { useDataTableContent as S } from "./hooks/use-data-table-content.js";
-import { SLOT_ATTR as l } from "../../packages/volt-runtime/dist/renderer/contract.js";
-const L = D({
+import { j as e } from "../../vendor/react/jsx-dev-runtime.js";
+import * as N from "react";
+import { makeVoltStyles as g } from "../../styles/make-styles.js";
+import { grayA11 as v } from "../../tokens/index.js";
+import { TableBody as t, TableRow as D, TableCell as h } from "../table/table.js";
+import { DataTableRow as w } from "./data-table-row.js";
+import { DataTableLoading as T } from "./data-table-loading.js";
+import { useDataTable as E } from "./hooks/use-data-table.js";
+import { useDataTableContent as V } from "./hooks/use-data-table-content.js";
+import { SLOT_ATTR as o } from "../../packages/volt-runtime/dist/renderer/contract.js";
+const j = g({
   stateCell: {
     height: "12rem",
-    color: g
+    color: v
   }
 });
-function i({
-  colSpan: b,
-  children: t
+function m({
+  colSpan: d,
+  children: a
 }) {
-  const r = L();
-  return /* @__PURE__ */ a(B, { noHover: !0, children: /* @__PURE__ */ a(w, { colSpan: b, align: "center", className: r.stateCell, children: t }) });
+  const r = j();
+  return /* @__PURE__ */ e.jsxDEV(D, { noHover: !0, children: /* @__PURE__ */ e.jsxDEV(h, { colSpan: d, align: "center", className: r.stateCell, children: a }, void 0, !1, {
+    fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/data-table/data-table-body.tsx",
+    lineNumber: 48,
+    columnNumber: 7
+  }, this) }, void 0, !1, {
+    fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/data-table/data-table-body.tsx",
+    lineNumber: 47,
+    columnNumber: 5
+  }, this);
 }
-const M = h.forwardRef(function({
-  className: t,
+const _ = N.forwardRef(function({
+  className: a,
   emptyState: r,
   loadingState: f,
-  isLoading: u = !1,
-  errorState: d,
-  isError: m = !1
-}, e) {
-  const { table: c } = R(), s = S(), T = (s == null ? void 0 : s.spacerWidth) ?? 0, p = c.getRowModel().rows, n = c.getVisibleLeafColumns().length + (T > 0 ? 1 : 0);
-  return process.env.NODE_ENV !== "production" && m && !d && console.warn(
+  isLoading: x = !1,
+  errorState: s,
+  isError: b = !1
+}, l) {
+  const { table: u } = E(), i = V(), y = (i == null ? void 0 : i.spacerWidth) ?? 0, c = u.getRowModel().rows, n = u.getVisibleLeafColumns().length + (y > 0 ? 1 : 0);
+  return process.env.NODE_ENV !== "production" && b && !s && console.warn(
     "DataTableBody: isError is true but no errorState was provided. Please provide an errorState prop to display error content."
-  ), m && d ? /* @__PURE__ */ a(
-    o,
+  ), b && s ? /* @__PURE__ */ e.jsxDEV(
+    t,
     {
-      ref: e,
+      ref: l,
       "data-slot": "data-table-body",
-      [l]: "data-table-body",
+      [o]: "data-table-body",
       "data-fs-element": "DataTable-Body",
       "data-state": "error",
-      className: t,
-      children: /* @__PURE__ */ a(i, { colSpan: n, children: d })
-    }
-  ) : u ? /* @__PURE__ */ a(
-    o,
+      className: a,
+      children: /* @__PURE__ */ e.jsxDEV(m, { colSpan: n, children: s }, void 0, !1, {
+        fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/data-table/data-table-body.tsx",
+        lineNumber: 102,
+        columnNumber: 9
+      }, this)
+    },
+    void 0,
+    !1,
     {
-      ref: e,
+      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/data-table/data-table-body.tsx",
+      lineNumber: 94,
+      columnNumber: 7
+    },
+    this
+  ) : x ? /* @__PURE__ */ e.jsxDEV(
+    t,
+    {
+      ref: l,
       "data-slot": "data-table-body",
-      [l]: "data-table-body",
+      [o]: "data-table-body",
       "data-fs-element": "DataTable-Body",
       "data-state": "loading",
-      className: t,
+      className: a,
       "aria-busy": "true",
-      children: /* @__PURE__ */ a(i, { colSpan: n, children: f ?? /* @__PURE__ */ a(C, {}) })
-    }
-  ) : p.length ? /* @__PURE__ */ a(
-    o,
+      children: /* @__PURE__ */ e.jsxDEV(m, { colSpan: n, children: f ?? /* @__PURE__ */ e.jsxDEV(T, {}, void 0, !1, {
+        fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/data-table/data-table-body.tsx",
+        lineNumber: 122,
+        columnNumber: 28
+      }, this) }, void 0, !1, {
+        fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/data-table/data-table-body.tsx",
+        lineNumber: 121,
+        columnNumber: 9
+      }, this)
+    },
+    void 0,
+    !1,
+    {
+      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/data-table/data-table-body.tsx",
+      lineNumber: 112,
+      columnNumber: 7
+    },
+    this
+  ) : c.length ? /* @__PURE__ */ e.jsxDEV(
+    t,
     {
-      ref: e,
+      ref: l,
       "data-slot": "data-table-body",
-      [l]: "data-table-body",
+      [o]: "data-table-body",
       "data-fs-element": "DataTable-Body",
-      className: t,
-      children: p.map((y) => /* @__PURE__ */ a(v, { row: y }, y.id))
-    }
-  ) : /* @__PURE__ */ a(
-    o,
+      className: a,
+      children: c.map((p) => /* @__PURE__ */ e.jsxDEV(w, { row: p }, p.id, !1, {
+        fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/data-table/data-table-body.tsx",
+        lineNumber: 156,
+        columnNumber: 9
+      }, this))
+    },
+    void 0,
+    !1,
     {
-      ref: e,
+      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/data-table/data-table-body.tsx",
+      lineNumber: 148,
+      columnNumber: 5
+    },
+    this
+  ) : /* @__PURE__ */ e.jsxDEV(
+    t,
+    {
+      ref: l,
       "data-slot": "data-table-body",
-      [l]: "data-table-body",
+      [o]: "data-table-body",
       "data-fs-element": "DataTable-Body",
       "data-state": "empty",
-      className: t,
-      children: /* @__PURE__ */ a(i, { colSpan: n, children: r })
-    }
+      className: a,
+      children: /* @__PURE__ */ e.jsxDEV(m, { colSpan: n, children: r }, void 0, !1, {
+        fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/data-table/data-table-body.tsx",
+        lineNumber: 139,
+        columnNumber: 9
+      }, this)
+    },
+    void 0,
+    !1,
+    {
+      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/data-table/data-table-body.tsx",
+      lineNumber: 131,
+      columnNumber: 7
+    },
+    this
   );
 });
 export {
-  M as DataTableBody
+  _ as DataTableBody
 };
 //# sourceMappingURL=data-table-body.js.map

package/dist/components/data-table/data-table-body.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-body.js","sources":["../../../src/components/data-table/data-table-body.tsx"],"sourcesContent":["import * as React from \"react\"\nimport type { ReactNode } from \"react\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\nimport { TableBody, TableRow, TableCell } from \"../table/table\"\nimport { useDataTable, useDataTableContent } from \"./hooks\"\nimport { DataTableRow } from \"./data-table-row\"\nimport { DataTableLoading } from \"./data-table-loading\"\n\nconst useStyles = makeVoltStyles({\n  stateCell: {\n    height: \"12rem\",\n    color: tokens.grayA11,\n  },\n})\n\nexport type DataTableBodyProps = {\n  /** Additional class name */\n  className?: string\n  /** Custom empty state content */\n  emptyState?: ReactNode\n  /** Loading state content (shown when isLoading is true) */\n  loadingState?: ReactNode\n  /** Whether the table is in loading state */\n  isLoading?: boolean\n  /** Error state content (shown when isError is true) */\n  errorState?: ReactNode\n  /** Whether the table is in error state */\n  isError?: boolean\n}\n\n/**\n * Internal component for state display (loading/error/empty).\n */\nfunction DataTableStateDisplay({\n  colSpan,\n  children,\n}: {\n  colSpan: number\n  children?: ReactNode\n}) {\n  const styles = useStyles()\n\n  return (\n    <TableRow noHover>\n      <TableCell colSpan={colSpan} align=\"center\" className={styles.stateCell}>\n        {children}\n      </TableCell>\n    </TableRow>\n  )\n}\n\n/**\n * Renders the table body with rows.\n * Must be used within a DataTable component.\n */\nexport const DataTableBody = React.forwardRef<\n  HTMLTableSectionElement,\n  DataTableBodyProps\n>(function DataTableBody(\n  {\n    className,\n    emptyState,\n    loadingState,\n    isLoading = false,\n    errorState,\n    isError = false,\n  },\n  ref\n) {\n  const { table } = useDataTable()\n  const contentContext = useDataTableContent()\n  const spacerWidth = contentContext?.spacerWidth ?? 0\n\n  const rows = table.getRowModel().rows\n  const visibleColumns = table.getVisibleLeafColumns()\n  const colSpan = visibleColumns.length + (spacerWidth > 0 ? 1 : 0)\n\n  // Warn if isError is true but no errorState is provided\n  if (process.env.NODE_ENV !== \"production\" && isError && !errorState) {\n    console.warn(\n      \"DataTableBody: isError is true but no errorState was provided. \" +\n        \"Please provide an errorState prop to display error content.\"\n    )\n  }\n\n  // Priority: Error > Loading > Empty > Data\n\n  // Error state\n  if (isError && errorState) {\n    return (\n      <TableBody\n        ref={ref}\n        data-slot=\"data-table-body\"\n        {...{ [SLOT_ATTR]: \"data-table-body\" }}\n        data-fs-element=\"DataTable-Body\"\n        data-state=\"error\"\n        className={className}\n      >\n        <DataTableStateDisplay colSpan={colSpan}>\n          {errorState}\n        </DataTableStateDisplay>\n      </TableBody>\n    )\n  }\n\n  // Loading state\n  if (isLoading) {\n    return (\n      <TableBody\n        ref={ref}\n        data-slot=\"data-table-body\"\n        {...{ [SLOT_ATTR]: \"data-table-body\" }}\n        data-fs-element=\"DataTable-Body\"\n        data-state=\"loading\"\n        className={className}\n        aria-busy=\"true\"\n      >\n        <DataTableStateDisplay colSpan={colSpan}>\n          {loadingState ?? <DataTableLoading />}\n        </DataTableStateDisplay>\n      </TableBody>\n    )\n  }\n\n  // Empty state\n  if (!rows.length) {\n    return (\n      <TableBody\n        ref={ref}\n        data-slot=\"data-table-body\"\n        {...{ [SLOT_ATTR]: \"data-table-body\" }}\n        data-fs-element=\"DataTable-Body\"\n        data-state=\"empty\"\n        className={className}\n      >\n        <DataTableStateDisplay colSpan={colSpan}>\n          {emptyState}\n        </DataTableStateDisplay>\n      </TableBody>\n    )\n  }\n\n  // Standard rendering\n  return (\n    <TableBody\n      ref={ref}\n      data-slot=\"data-table-body\"\n      {...{ [SLOT_ATTR]: \"data-table-body\" }}\n      data-fs-element=\"DataTable-Body\"\n      className={className}\n    >\n      {rows.map((row) => (\n        <DataTableRow key={row.id} row={row} />\n      ))}\n    </TableBody>\n  )\n})\n"],"names":["useStyles","makeVoltStyles","tokens.grayA11","DataTableStateDisplay","colSpan","children","styles","jsx","TableRow","TableCell","DataTableBody","React","className","emptyState","loadingState","isLoading","errorState","isError","ref","table","useDataTable","contentContext","useDataTableContent","spacerWidth","rows","TableBody","SLOT_ATTR","DataTableLoading","row","DataTableRow"],"mappings":";;;;;;;;;;AAWA,MAAMA,IAAYC,EAAe;AAAA,EAC/B,WAAW;AAAA,IACT,QAAQ;AAAA,IACR,OAAOC;AAAAA,EAAO;AAElB,CAAC;AAoBD,SAASC,EAAsB;AAAA,EAC7B,SAAAC;AAAA,EACA,UAAAC;AACF,GAGG;AACD,QAAMC,IAASN,EAAA;AAEf,SACE,gBAAAO,EAACC,GAAA,EAAS,SAAO,IACf,UAAA,gBAAAD,EAACE,GAAA,EAAU,SAAAL,GAAkB,OAAM,UAAS,WAAWE,EAAO,WAC3D,UAAAD,GACH,GACF;AAEJ;AAMO,MAAMK,IAAgBC,EAAM,WAGjC,SACA;AAAA,EACE,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,cAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,YAAAC;AAAA,EACA,SAAAC,IAAU;AACZ,GACAC,GACA;AACA,QAAM,EAAE,OAAAC,EAAA,IAAUC,EAAA,GACZC,IAAiBC,EAAA,GACjBC,KAAcF,KAAA,gBAAAA,EAAgB,gBAAe,GAE7CG,IAAOL,EAAM,YAAA,EAAc,MAE3Bf,IADiBe,EAAM,sBAAA,EACE,UAAUI,IAAc,IAAI,IAAI;AAa/D,SAVI,QAAQ,IAAI,aAAa,gBAAgBN,KAAW,CAACD,KACvD,QAAQ;AAAA,IACN;AAAA,EAAA,GAQAC,KAAWD,IAEX,gBAAAT;AAAA,IAACkB;AAAA,IAAA;AAAA,MACC,KAAAP;AAAA,MACA,aAAU;AAAA,MACJ,CAACQ,CAAS,GAAG;AAAA,MACnB,mBAAgB;AAAA,MAChB,cAAW;AAAA,MACX,WAAAd;AAAA,MAEA,UAAA,gBAAAL,EAACJ,GAAA,EAAsB,SAAAC,GACpB,UAAAY,EAAA,CACH;AAAA,IAAA;AAAA,EAAA,IAMFD,IAEA,gBAAAR;AAAA,IAACkB;AAAA,IAAA;AAAA,MACC,KAAAP;AAAA,MACA,aAAU;AAAA,MACJ,CAACQ,CAAS,GAAG;AAAA,MACnB,mBAAgB;AAAA,MAChB,cAAW;AAAA,MACX,WAAAd;AAAA,MACA,aAAU;AAAA,MAEV,4BAACT,GAAA,EAAsB,SAAAC,GACpB,UAAAU,KAAgB,gBAAAP,EAACoB,KAAiB,EAAA,CACrC;AAAA,IAAA;AAAA,EAAA,IAMDH,EAAK,SAmBR,gBAAAjB;AAAA,IAACkB;AAAA,IAAA;AAAA,MACC,KAAAP;AAAA,MACA,aAAU;AAAA,MACJ,CAACQ,CAAS,GAAG;AAAA,MACnB,mBAAgB;AAAA,MAChB,WAAAd;AAAA,MAEC,UAAAY,EAAK,IAAI,CAACI,wBACRC,GAAA,EAA0B,KAAAD,EAAA,GAARA,EAAI,EAAc,CACtC;AAAA,IAAA;AAAA,EAAA,IA1BD,gBAAArB;AAAA,IAACkB;AAAA,IAAA;AAAA,MACC,KAAAP;AAAA,MACA,aAAU;AAAA,MACJ,CAACQ,CAAS,GAAG;AAAA,MACnB,mBAAgB;AAAA,MAChB,cAAW;AAAA,MACX,WAAAd;AAAA,MAEA,UAAA,gBAAAL,EAACJ,GAAA,EAAsB,SAAAC,GACpB,UAAAS,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAmBR,CAAC;"}
+{"version":3,"file":"data-table-body.js","sources":["../../../src/components/data-table/data-table-body.tsx"],"sourcesContent":["import * as React from \"react\"\nimport type { ReactNode } from \"react\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\nimport { TableBody, TableRow, TableCell } from \"../table/table\"\nimport { useDataTable, useDataTableContent } from \"./hooks\"\nimport { DataTableRow } from \"./data-table-row\"\nimport { DataTableLoading } from \"./data-table-loading\"\n\nconst useStyles = makeVoltStyles({\n  stateCell: {\n    height: \"12rem\",\n    color: tokens.grayA11,\n  },\n})\n\nexport type DataTableBodyProps = {\n  /** Additional class name */\n  className?: string\n  /** Custom empty state content */\n  emptyState?: ReactNode\n  /** Loading state content (shown when isLoading is true) */\n  loadingState?: ReactNode\n  /** Whether the table is in loading state */\n  isLoading?: boolean\n  /** Error state content (shown when isError is true) */\n  errorState?: ReactNode\n  /** Whether the table is in error state */\n  isError?: boolean\n}\n\n/**\n * Internal component for state display (loading/error/empty).\n */\nfunction DataTableStateDisplay({\n  colSpan,\n  children,\n}: {\n  colSpan: number\n  children?: ReactNode\n}) {\n  const styles = useStyles()\n\n  return (\n    <TableRow noHover>\n      <TableCell colSpan={colSpan} align=\"center\" className={styles.stateCell}>\n        {children}\n      </TableCell>\n    </TableRow>\n  )\n}\n\n/**\n * Renders the table body with rows.\n * Must be used within a DataTable component.\n */\nexport const DataTableBody = React.forwardRef<\n  HTMLTableSectionElement,\n  DataTableBodyProps\n>(function DataTableBody(\n  {\n    className,\n    emptyState,\n    loadingState,\n    isLoading = false,\n    errorState,\n    isError = false,\n  },\n  ref\n) {\n  const { table } = useDataTable()\n  const contentContext = useDataTableContent()\n  const spacerWidth = contentContext?.spacerWidth ?? 0\n\n  const rows = table.getRowModel().rows\n  const visibleColumns = table.getVisibleLeafColumns()\n  const colSpan = visibleColumns.length + (spacerWidth > 0 ? 1 : 0)\n\n  // Warn if isError is true but no errorState is provided\n  if (process.env.NODE_ENV !== \"production\" && isError && !errorState) {\n    console.warn(\n      \"DataTableBody: isError is true but no errorState was provided. \" +\n        \"Please provide an errorState prop to display error content.\"\n    )\n  }\n\n  // Priority: Error > Loading > Empty > Data\n\n  // Error state\n  if (isError && errorState) {\n    return (\n      <TableBody\n        ref={ref}\n        data-slot=\"data-table-body\"\n        {...{ [SLOT_ATTR]: \"data-table-body\" }}\n        data-fs-element=\"DataTable-Body\"\n        data-state=\"error\"\n        className={className}\n      >\n        <DataTableStateDisplay colSpan={colSpan}>\n          {errorState}\n        </DataTableStateDisplay>\n      </TableBody>\n    )\n  }\n\n  // Loading state\n  if (isLoading) {\n    return (\n      <TableBody\n        ref={ref}\n        data-slot=\"data-table-body\"\n        {...{ [SLOT_ATTR]: \"data-table-body\" }}\n        data-fs-element=\"DataTable-Body\"\n        data-state=\"loading\"\n        className={className}\n        aria-busy=\"true\"\n      >\n        <DataTableStateDisplay colSpan={colSpan}>\n          {loadingState ?? <DataTableLoading />}\n        </DataTableStateDisplay>\n      </TableBody>\n    )\n  }\n\n  // Empty state\n  if (!rows.length) {\n    return (\n      <TableBody\n        ref={ref}\n        data-slot=\"data-table-body\"\n        {...{ [SLOT_ATTR]: \"data-table-body\" }}\n        data-fs-element=\"DataTable-Body\"\n        data-state=\"empty\"\n        className={className}\n      >\n        <DataTableStateDisplay colSpan={colSpan}>\n          {emptyState}\n        </DataTableStateDisplay>\n      </TableBody>\n    )\n  }\n\n  // Standard rendering\n  return (\n    <TableBody\n      ref={ref}\n      data-slot=\"data-table-body\"\n      {...{ [SLOT_ATTR]: \"data-table-body\" }}\n      data-fs-element=\"DataTable-Body\"\n      className={className}\n    >\n      {rows.map((row) => (\n        <DataTableRow key={row.id} row={row} />\n      ))}\n    </TableBody>\n  )\n})\n"],"names":["useStyles","makeVoltStyles","tokens.grayA11","DataTableStateDisplay","colSpan","children","styles","jsxDEV","TableRow","TableCell","DataTableBody","React","className","emptyState","loadingState","isLoading","errorState","isError","ref","table","useDataTable","contentContext","useDataTableContent","spacerWidth","rows","TableBody","SLOT_ATTR","DataTableLoading","row","DataTableRow"],"mappings":"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"}

package/dist/components/data-table/data-table-column-header.js

@@ -1,11 +1,11 @@
-import { jsx as o, jsxs as n } from "react/jsx-runtime";
-import * as l from "react";
-import { shorthands as i } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/index.js";
-import { SLOT_ATTR as g } from "../../packages/volt-runtime/dist/renderer/contract.js";
-import { mergeClasses as h } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
-import { makeVoltStyles as m } from "../../styles/make-styles.js";
-import { radiusLg as p, spacingElement1 as c, accent11 as u, accentA8 as w, semAccentSoft as k } from "../../tokens/index.js";
-const f = (e) => /* @__PURE__ */ n(
+import { j as a } from "../../vendor/react/jsx-dev-runtime.js";
+import * as m from "react";
+import { shorthands as l } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/index.js";
+import { SLOT_ATTR as d } from "../../packages/volt-runtime/dist/renderer/contract.js";
+import { mergeClasses as c } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
+import { makeVoltStyles as u } from "../../styles/make-styles.js";
+import { radiusLg as p, spacingElement1 as s, accent11 as f, accentA8 as b, semAccentSoft as g } from "../../tokens/index.js";
+const h = (e) => /* @__PURE__ */ a.jsxDEV(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -19,11 +19,27 @@ const f = (e) => /* @__PURE__ */ n(
     strokeLinejoin: "round",
     ...e,
     children: [
-      /* @__PURE__ */ o("path", { d: "m5 12 7-7 7 7" }),
-      /* @__PURE__ */ o("path", { d: "M12 19V5" })
+      /* @__PURE__ */ a.jsxDEV("path", { d: "m5 12 7-7 7 7" }, void 0, !1, {
+        fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/data-table/data-table-column-header.tsx",
+        lineNumber: 24,
+        columnNumber: 5
+      }, void 0),
+      /* @__PURE__ */ a.jsxDEV("path", { d: "M12 19V5" }, void 0, !1, {
+        fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/data-table/data-table-column-header.tsx",
+        lineNumber: 25,
+        columnNumber: 5
+      }, void 0)
     ]
-  }
-), v = (e) => /* @__PURE__ */ n(
+  },
+  void 0,
+  !0,
+  {
+    fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/data-table/data-table-column-header.tsx",
+    lineNumber: 12,
+    columnNumber: 3
+  },
+  void 0
+), x = (e) => /* @__PURE__ */ a.jsxDEV(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -37,11 +53,27 @@ const f = (e) => /* @__PURE__ */ n(
     strokeLinejoin: "round",
     ...e,
     children: [
-      /* @__PURE__ */ o("path", { d: "M12 5v14" }),
-      /* @__PURE__ */ o("path", { d: "m19 12-7 7-7-7" })
+      /* @__PURE__ */ a.jsxDEV("path", { d: "M12 5v14" }, void 0, !1, {
+        fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/data-table/data-table-column-header.tsx",
+        lineNumber: 42,
+        columnNumber: 5
+      }, void 0),
+      /* @__PURE__ */ a.jsxDEV("path", { d: "m19 12-7 7-7-7" }, void 0, !1, {
+        fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/data-table/data-table-column-header.tsx",
+        lineNumber: 43,
+        columnNumber: 5
+      }, void 0)
     ]
-  }
-), S = (e) => /* @__PURE__ */ n(
+  },
+  void 0,
+  !0,
+  {
+    fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/data-table/data-table-column-header.tsx",
+    lineNumber: 30,
+    columnNumber: 3
+  },
+  void 0
+), v = (e) => /* @__PURE__ */ a.jsxDEV(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -55,35 +87,51 @@ const f = (e) => /* @__PURE__ */ n(
     strokeLinejoin: "round",
     ...e,
     children: [
-      /* @__PURE__ */ o("path", { d: "m7 15 5 5 5-5" }),
-      /* @__PURE__ */ o("path", { d: "m7 9 5-5 5 5" })
+      /* @__PURE__ */ a.jsxDEV("path", { d: "m7 15 5 5 5-5" }, void 0, !1, {
+        fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/data-table/data-table-column-header.tsx",
+        lineNumber: 60,
+        columnNumber: 5
+      }, void 0),
+      /* @__PURE__ */ a.jsxDEV("path", { d: "m7 9 5-5 5 5" }, void 0, !1, {
+        fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/data-table/data-table-column-header.tsx",
+        lineNumber: 61,
+        columnNumber: 5
+      }, void 0)
     ]
-  }
-), b = m({
+  },
+  void 0,
+  !0,
+  {
+    fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/data-table/data-table-column-header.tsx",
+    lineNumber: 48,
+    columnNumber: 3
+  },
+  void 0
+), N = u({
   button: {
     display: "inline-flex",
     alignItems: "center",
-    gap: c,
-    ...i.paddingBlock("0.125rem"),
-    ...i.paddingInline(c),
-    ...i.borderRadius(p),
+    gap: s,
+    ...l.paddingBlock("0.125rem"),
+    ...l.paddingInline(s),
+    ...l.borderRadius(p),
     cursor: "pointer",
     transitionProperty: "color, background-color, border-color",
     transitionDuration: "150ms",
     ":hover": {
-      backgroundColor: k
+      backgroundColor: g
     },
     ":focus-visible": {
       outlineWidth: "2px",
       outlineStyle: "solid",
       outlineOffset: "2px",
-      outlineColor: w
+      outlineColor: b
     }
   },
   iconActive: {
     width: "1rem",
     height: "1rem",
-    color: u,
+    color: f,
     flexShrink: 0
   },
   iconUnsorted: {
@@ -93,36 +141,60 @@ const f = (e) => /* @__PURE__ */ n(
     flexShrink: 0
   }
 });
-function x({ column: e, title: t, className: a }, d) {
-  const r = b();
-  return e.getCanSort() ? /* @__PURE__ */ n(
+function w({ column: e, title: r, className: i }, n) {
+  const o = N();
+  return e.getCanSort() ? /* @__PURE__ */ a.jsxDEV(
     "span",
     {
-      ref: d,
+      ref: n,
       role: "button",
       tabIndex: 0,
       "data-slot": "data-table-column-header",
-      [g]: "data-table-column-header",
+      [d]: "data-table-column-header",
       "data-fs-element": "DataTable-SortButton",
       onClick: () => e.toggleSorting(),
-      onKeyDown: (s) => {
-        (s.key === "Enter" || s.key === " ") && (s.preventDefault(), e.toggleSorting());
+      onKeyDown: (t) => {
+        (t.key === "Enter" || t.key === " ") && (t.preventDefault(), e.toggleSorting());
       },
-      "aria-label": e.getIsSorted() === "asc" ? `${t}, sorted ascending. Click to sort descending.` : e.getIsSorted() === "desc" ? `${t}, sorted descending. Click to remove sorting.` : `${t}. Click to sort ascending.`,
-      className: h(r.button, a),
+      "aria-label": e.getIsSorted() === "asc" ? `${r}, sorted ascending. Click to sort descending.` : e.getIsSorted() === "desc" ? `${r}, sorted descending. Click to remove sorting.` : `${r}. Click to sort ascending.`,
+      className: c(o.button, i),
       children: [
-        t,
-        e.getIsSorted() === "asc" && /* @__PURE__ */ o(f, { className: r.iconActive }),
-        e.getIsSorted() === "desc" && /* @__PURE__ */ o(v, { className: r.iconActive }),
-        !e.getIsSorted() && /* @__PURE__ */ o(S, { className: r.iconUnsorted })
+        r,
+        e.getIsSorted() === "asc" && /* @__PURE__ */ a.jsxDEV(h, { className: o.iconActive }, void 0, !1, {
+          fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/data-table/data-table-column-header.tsx",
+          lineNumber: 149,
+          columnNumber: 9
+        }, this),
+        e.getIsSorted() === "desc" && /* @__PURE__ */ a.jsxDEV(x, { className: o.iconActive }, void 0, !1, {
+          fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/data-table/data-table-column-header.tsx",
+          lineNumber: 152,
+          columnNumber: 9
+        }, this),
+        !e.getIsSorted() && /* @__PURE__ */ a.jsxDEV(v, { className: o.iconUnsorted }, void 0, !1, {
+          fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/data-table/data-table-column-header.tsx",
+          lineNumber: 155,
+          columnNumber: 9
+        }, this)
       ]
-    }
-  ) : /* @__PURE__ */ o("span", { ref: d, className: a, children: t });
+    },
+    void 0,
+    !0,
+    {
+      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/data-table/data-table-column-header.tsx",
+      lineNumber: 124,
+      columnNumber: 5
+    },
+    this
+  ) : /* @__PURE__ */ a.jsxDEV("span", { ref: n, className: i, children: r }, void 0, !1, {
+    fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/data-table/data-table-column-header.tsx",
+    lineNumber: 117,
+    columnNumber: 7
+  }, this);
 }
-const T = l.forwardRef(
-  x
+const V = m.forwardRef(
+  w
 );
 export {
-  T as DataTableColumnHeader
+  V as DataTableColumnHeader
 };
 //# sourceMappingURL=data-table-column-header.js.map

package/dist/components/data-table/data-table-column-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-column-header.js","sources":["../../../src/components/data-table/data-table-column-header.tsx"],"sourcesContent":["import * as React from \"react\"\nimport type { SVGProps } from \"react\"\nimport type { Column } from \"@tanstack/react-table\"\nimport { mergeClasses, shorthands } from \"@epilot/volt-ui-runtime\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\n\n// Sort icons\nconst IconArrowUp = (props: SVGProps<SVGSVGElement>) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"16\"\n    height=\"16\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    {...props}\n  >\n    <path d=\"m5 12 7-7 7 7\" />\n    <path d=\"M12 19V5\" />\n  </svg>\n)\n\nconst IconArrowDown = (props: SVGProps<SVGSVGElement>) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"16\"\n    height=\"16\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    {...props}\n  >\n    <path d=\"M12 5v14\" />\n    <path d=\"m19 12-7 7-7-7\" />\n  </svg>\n)\n\nconst IconArrowsSort = (props: SVGProps<SVGSVGElement>) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"16\"\n    height=\"16\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    {...props}\n  >\n    <path d=\"m7 15 5 5 5-5\" />\n    <path d=\"m7 9 5-5 5 5\" />\n  </svg>\n)\n\nconst useStyles = makeVoltStyles({\n  button: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    gap: tokens.spacingElement1,\n    ...shorthands.paddingBlock(\"0.125rem\"),\n    ...shorthands.paddingInline(tokens.spacingElement1),\n    ...shorthands.borderRadius(tokens.radiusLg),\n    cursor: \"pointer\",\n    transitionProperty: \"color, background-color, border-color\",\n    transitionDuration: \"150ms\",\n    \":hover\": {\n      backgroundColor: tokens.semAccentSoft,\n    },\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineOffset: \"2px\",\n      outlineColor: tokens.accentA8,\n    },\n  },\n  iconActive: {\n    width: \"1rem\",\n    height: \"1rem\",\n    color: tokens.accent11,\n    flexShrink: 0,\n  },\n  iconUnsorted: {\n    width: \"1rem\",\n    height: \"1rem\",\n    opacity: 0.4,\n    flexShrink: 0,\n  },\n})\n\nexport type DataTableColumnHeaderProps<TData = unknown, TValue = unknown> = {\n  /** The column instance from Tanstack Table */\n  column: Column<TData, TValue>\n  /** The header title to display */\n  title: string\n  /** Additional class name */\n  className?: string\n}\n\nfunction DataTableColumnHeaderInner<TData, TValue>(\n  { column, title, className }: DataTableColumnHeaderProps<TData, TValue>,\n  ref: React.ForwardedRef<HTMLSpanElement>\n) {\n  const styles = useStyles()\n\n  if (!column.getCanSort()) {\n    return (\n      <span ref={ref} className={className}>\n        {title}\n      </span>\n    )\n  }\n\n  return (\n    <span\n      ref={ref}\n      role=\"button\"\n      tabIndex={0}\n      data-slot=\"data-table-column-header\"\n      {...{ [SLOT_ATTR]: \"data-table-column-header\" }}\n      data-fs-element=\"DataTable-SortButton\"\n      onClick={() => column.toggleSorting()}\n      onKeyDown={(e) => {\n        if (e.key === \"Enter\" || e.key === \" \") {\n          e.preventDefault()\n          column.toggleSorting()\n        }\n      }}\n      aria-label={\n        column.getIsSorted() === \"asc\"\n          ? `${title}, sorted ascending. Click to sort descending.`\n          : column.getIsSorted() === \"desc\"\n            ? `${title}, sorted descending. Click to remove sorting.`\n            : `${title}. Click to sort ascending.`\n      }\n      className={mergeClasses(styles.button, className)}\n    >\n      {title}\n      {column.getIsSorted() === \"asc\" && (\n        <IconArrowUp className={styles.iconActive} />\n      )}\n      {column.getIsSorted() === \"desc\" && (\n        <IconArrowDown className={styles.iconActive} />\n      )}\n      {!column.getIsSorted() && (\n        <IconArrowsSort className={styles.iconUnsorted} />\n      )}\n    </span>\n  )\n}\n\nexport const DataTableColumnHeader = React.forwardRef(\n  DataTableColumnHeaderInner\n) as <TData = unknown, TValue = unknown>(\n  props: DataTableColumnHeaderProps<TData, TValue> & {\n    ref?: React.Ref<HTMLSpanElement>\n  }\n) => React.ReactElement | null\n"],"names":["IconArrowUp","props","jsxs","jsx","IconArrowDown","IconArrowsSort","useStyles","makeVoltStyles","tokens.spacingElement1","shorthands","tokens.radiusLg","tokens.semAccentSoft","tokens.accentA8","tokens.accent11","DataTableColumnHeaderInner","column","title","className","ref","styles","SLOT_ATTR","e","mergeClasses","DataTableColumnHeader","React"],"mappings":"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"}
+{"version":3,"file":"data-table-column-header.js","sources":["../../../src/components/data-table/data-table-column-header.tsx"],"sourcesContent":["import * as React from \"react\"\nimport type { SVGProps } from \"react\"\nimport type { Column } from \"@tanstack/react-table\"\nimport { mergeClasses, shorthands } from \"@epilot/volt-ui-runtime\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\n\n// Sort icons\nconst IconArrowUp = (props: SVGProps<SVGSVGElement>) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"16\"\n    height=\"16\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    {...props}\n  >\n    <path d=\"m5 12 7-7 7 7\" />\n    <path d=\"M12 19V5\" />\n  </svg>\n)\n\nconst IconArrowDown = (props: SVGProps<SVGSVGElement>) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"16\"\n    height=\"16\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    {...props}\n  >\n    <path d=\"M12 5v14\" />\n    <path d=\"m19 12-7 7-7-7\" />\n  </svg>\n)\n\nconst IconArrowsSort = (props: SVGProps<SVGSVGElement>) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"16\"\n    height=\"16\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    {...props}\n  >\n    <path d=\"m7 15 5 5 5-5\" />\n    <path d=\"m7 9 5-5 5 5\" />\n  </svg>\n)\n\nconst useStyles = makeVoltStyles({\n  button: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    gap: tokens.spacingElement1,\n    ...shorthands.paddingBlock(\"0.125rem\"),\n    ...shorthands.paddingInline(tokens.spacingElement1),\n    ...shorthands.borderRadius(tokens.radiusLg),\n    cursor: \"pointer\",\n    transitionProperty: \"color, background-color, border-color\",\n    transitionDuration: \"150ms\",\n    \":hover\": {\n      backgroundColor: tokens.semAccentSoft,\n    },\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineOffset: \"2px\",\n      outlineColor: tokens.accentA8,\n    },\n  },\n  iconActive: {\n    width: \"1rem\",\n    height: \"1rem\",\n    color: tokens.accent11,\n    flexShrink: 0,\n  },\n  iconUnsorted: {\n    width: \"1rem\",\n    height: \"1rem\",\n    opacity: 0.4,\n    flexShrink: 0,\n  },\n})\n\nexport type DataTableColumnHeaderProps<TData = unknown, TValue = unknown> = {\n  /** The column instance from Tanstack Table */\n  column: Column<TData, TValue>\n  /** The header title to display */\n  title: string\n  /** Additional class name */\n  className?: string\n}\n\nfunction DataTableColumnHeaderInner<TData, TValue>(\n  { column, title, className }: DataTableColumnHeaderProps<TData, TValue>,\n  ref: React.ForwardedRef<HTMLSpanElement>\n) {\n  const styles = useStyles()\n\n  if (!column.getCanSort()) {\n    return (\n      <span ref={ref} className={className}>\n        {title}\n      </span>\n    )\n  }\n\n  return (\n    <span\n      ref={ref}\n      role=\"button\"\n      tabIndex={0}\n      data-slot=\"data-table-column-header\"\n      {...{ [SLOT_ATTR]: \"data-table-column-header\" }}\n      data-fs-element=\"DataTable-SortButton\"\n      onClick={() => column.toggleSorting()}\n      onKeyDown={(e) => {\n        if (e.key === \"Enter\" || e.key === \" \") {\n          e.preventDefault()\n          column.toggleSorting()\n        }\n      }}\n      aria-label={\n        column.getIsSorted() === \"asc\"\n          ? `${title}, sorted ascending. Click to sort descending.`\n          : column.getIsSorted() === \"desc\"\n            ? `${title}, sorted descending. Click to remove sorting.`\n            : `${title}. Click to sort ascending.`\n      }\n      className={mergeClasses(styles.button, className)}\n    >\n      {title}\n      {column.getIsSorted() === \"asc\" && (\n        <IconArrowUp className={styles.iconActive} />\n      )}\n      {column.getIsSorted() === \"desc\" && (\n        <IconArrowDown className={styles.iconActive} />\n      )}\n      {!column.getIsSorted() && (\n        <IconArrowsSort className={styles.iconUnsorted} />\n      )}\n    </span>\n  )\n}\n\nexport const DataTableColumnHeader = React.forwardRef(\n  DataTableColumnHeaderInner\n) as <TData = unknown, TValue = unknown>(\n  props: DataTableColumnHeaderProps<TData, TValue> & {\n    ref?: React.Ref<HTMLSpanElement>\n  }\n) => React.ReactElement | null\n"],"names":["IconArrowUp","props","jsxDEV","this","IconArrowDown","IconArrowsSort","useStyles","makeVoltStyles","tokens.spacingElement1","shorthands","tokens.radiusLg","tokens.semAccentSoft","tokens.accentA8","tokens.accent11","DataTableColumnHeaderInner","column","title","className","ref","styles","SLOT_ATTR","e","mergeClasses","DataTableColumnHeader","React"],"mappings":"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"}