@shipfox/react-ui 0.13.0 → 0.15.0

package/dist/components/button-group/button-group.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/button-group/button-group.stories.tsx"],"sourcesContent":["import type {Meta, StoryObj} from '@storybook/react';\nimport {useState} from 'react';\nimport {Button} from '../button';\nimport {Icon} from '../icon';\nimport {Input} from '../input';\nimport {Popover, PopoverContent, PopoverTrigger} from '../popover';\nimport {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from '../select';\nimport {Textarea} from '../textarea';\nimport {Code, Header} from '../typography';\nimport {ButtonGroup, ButtonGroupSeparator, ButtonGroupText} from './button-group';\n\nconst meta = {\n  title: 'Components/ButtonGroup',\n  component: ButtonGroup,\n  tags: ['autodocs'],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          'A container that groups related buttons together with consistent styling. Automatically styles Button, Input, Select, and Textarea children without requiring manual className overrides. Separators are recommended for visual hierarchy.',\n      },\n    },\n  },\n  argTypes: {\n    orientation: {\n      control: 'select',\n      options: ['horizontal', 'vertical'],\n      description: 'The orientation of the button group',\n      defaultValue: 'horizontal',\n    },\n  },\n} satisfies Meta<typeof ButtonGroup>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nfunction SelectExample() {\n  const [currency, setCurrency] = useState('$');\n\n  return (\n    <div className=\"inline-flex gap-8\">\n      <ButtonGroup className=\"w-280\" aria-label=\"Currency converter\">\n        <Select value={currency} onValueChange={setCurrency}>\n          <SelectTrigger\n            className=\"w-80 font-mono text-foreground-neutral-subtle\"\n            aria-label=\"Select currency\"\n          >\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent align=\"start\">\n            <SelectItem value=\"$\">$ USD</SelectItem>\n            <SelectItem value=\"€\">€ EUR</SelectItem>\n            <SelectItem value=\"£\">£ GBP</SelectItem>\n            <SelectItem value=\"¥\">¥ JPY</SelectItem>\n          </SelectContent>\n        </Select>\n        <ButtonGroupSeparator />\n        <Input placeholder=\"10.00\" pattern=\"[0-9]*\" aria-label=\"Amount\" />\n      </ButtonGroup>\n      <ButtonGroup aria-label=\"Send action\">\n        <Button variant=\"secondary\" aria-label=\"Send\">\n          <Icon name=\"arrowRightLine\" className=\"size-16 text-foreground-neutral-subtle\" />\n        </Button>\n      </ButtonGroup>\n    </div>\n  );\n}\n\nfunction PopoverExample() {\n  const [open, setOpen] = useState(false);\n\n  return (\n    <ButtonGroup aria-label=\"Copilot actions\">\n      <ButtonGroupText>\n        <Icon name=\"sparklingLine\" className=\"size-16\" />\n        Copilot\n      </ButtonGroupText>\n      <ButtonGroupSeparator />\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"secondary\"\n            size=\"sm\"\n            className=\"!text-foreground-neutral-subtle\"\n            aria-label=\"Open Copilot options\"\n          >\n            <Icon name=\"arrowDownSLine\" className=\"size-16\" />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent align=\"end\" className=\"w-320 p-0 rounded-12\">\n          <div className=\"px-16 py-12 border-b border-border-neutral-strong\">\n            <Header variant=\"h4\" className=\"text-sm font-medium\">\n              Agent Tasks\n            </Header>\n          </div>\n          <div className=\"p-16 flex flex-col gap-12\">\n            <Textarea\n              placeholder=\"Describe your task in natural language.\"\n              className=\"min-h-80 resize-none\"\n              aria-label=\"Task description\"\n            />\n            <div className=\"flex flex-col gap-8\">\n              <Code variant=\"label\" className=\"font-medium text-foreground-neutral-base\">\n                Start a new task with Copilot\n              </Code>\n              <Code variant=\"paragraph\" className=\"text-foreground-neutral-subtle text-xs\">\n                Describe your task in natural language. Copilot will work in the background and open\n                a pull request for your review.\n              </Code>\n            </div>\n          </div>\n        </PopoverContent>\n      </Popover>\n    </ButtonGroup>\n  );\n}\n\nexport const Default: Story = {\n  render: () => (\n    <div className=\"flex flex-col gap-24\">\n      {/* Basic Button Group */}\n      <div className=\"flex flex-col gap-8\">\n        <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n          Basic Button Group\n        </Code>\n        <ButtonGroup aria-label=\"Text alignment\">\n          <Button variant=\"secondary\" size=\"sm\" aria-label=\"Align left\">\n            <Icon name=\"rewindFill\" className=\"size-14 text-foreground-neutral-subtle\" />\n          </Button>\n          <ButtonGroupSeparator />\n          <Button variant=\"secondary\" size=\"sm\" aria-label=\"Align center\">\n            <Icon name=\"playFill\" className=\"size-14 text-foreground-neutral-subtle\" />\n          </Button>\n          <ButtonGroupSeparator />\n          <Button variant=\"secondary\" size=\"sm\" aria-label=\"Align right\">\n            <Icon name=\"speedFill\" className=\"size-14 text-foreground-neutral-subtle\" />\n          </Button>\n        </ButtonGroup>\n      </div>\n\n      {/* Sizes */}\n      <div className=\"flex flex-col gap-12\">\n        <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n          Sizes\n        </Code>\n        <div className=\"flex flex-col gap-8\">\n          <ButtonGroup aria-label=\"Small buttons\">\n            <Button variant=\"secondary\" size=\"sm\" aria-label=\"Cut\">\n              <Icon name=\"rewindFill\" className=\"size-14 text-foreground-neutral-subtle\" />\n            </Button>\n            <ButtonGroupSeparator />\n            <Button variant=\"secondary\" size=\"sm\" aria-label=\"Copy\">\n              <Icon name=\"playFill\" className=\"size-14 text-foreground-neutral-subtle\" />\n            </Button>\n            <ButtonGroupSeparator />\n            <Button variant=\"secondary\" size=\"sm\" aria-label=\"Paste\">\n              <Icon name=\"speedFill\" className=\"size-14 text-foreground-neutral-subtle\" />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup aria-label=\"Medium buttons\">\n            <Button variant=\"secondary\" size=\"md\" aria-label=\"Cut\">\n              <Icon name=\"rewindFill\" className=\"size-16 text-foreground-neutral-subtle\" />\n            </Button>\n            <ButtonGroupSeparator />\n            <Button variant=\"secondary\" size=\"md\" aria-label=\"Copy\">\n              <Icon name=\"playFill\" className=\"size-16 text-foreground-neutral-subtle\" />\n            </Button>\n            <ButtonGroupSeparator />\n            <Button variant=\"secondary\" size=\"md\" aria-label=\"Paste\">\n              <Icon name=\"speedFill\" className=\"size-16 text-foreground-neutral-subtle\" />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup aria-label=\"Large buttons\">\n            <Button variant=\"secondary\" size=\"lg\" aria-label=\"Cut\">\n              <Icon name=\"rewindFill\" className=\"size-16 text-foreground-neutral-subtle\" />\n            </Button>\n            <ButtonGroupSeparator />\n            <Button variant=\"secondary\" size=\"lg\" aria-label=\"Copy\">\n              <Icon name=\"playFill\" className=\"size-16 text-foreground-neutral-subtle\" />\n            </Button>\n            <ButtonGroupSeparator />\n            <Button variant=\"secondary\" size=\"lg\" aria-label=\"Paste\">\n              <Icon name=\"speedFill\" className=\"size-16 text-foreground-neutral-subtle\" />\n            </Button>\n          </ButtonGroup>\n        </div>\n      </div>\n\n      {/* Orientation */}\n      <div className=\"flex flex-col gap-8\">\n        <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n          Orientation\n        </Code>\n        <div className=\"flex gap-24 items-start\">\n          <ButtonGroup aria-label=\"Horizontal\">\n            <Button variant=\"secondary\" size=\"sm\" aria-label=\"Zoom in\">\n              <Icon name=\"addLine\" className=\"size-16 text-foreground-neutral-subtle\" />\n            </Button>\n            <ButtonGroupSeparator />\n            <Button variant=\"secondary\" size=\"sm\" aria-label=\"Zoom out\">\n              <Icon name=\"subtractLine\" className=\"size-16 text-foreground-neutral-subtle\" />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup orientation=\"vertical\" className=\"h-fit w-fit\" aria-label=\"Vertical\">\n            <Button variant=\"secondary\" size=\"sm\" aria-label=\"Increase\">\n              <Icon name=\"addLine\" className=\"size-16 text-foreground-neutral-subtle\" />\n            </Button>\n            <ButtonGroupSeparator orientation=\"horizontal\" />\n            <Button variant=\"secondary\" size=\"sm\" aria-label=\"Decrease\">\n              <Icon name=\"subtractLine\" className=\"size-16 text-foreground-neutral-subtle\" />\n            </Button>\n          </ButtonGroup>\n        </div>\n      </div>\n\n      {/* Split Button */}\n      <div className=\"flex flex-col gap-8\">\n        <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n          Split Button\n        </Code>\n        <ButtonGroup aria-label=\"Save actions\">\n          <Button variant=\"secondary\" size=\"sm\" className=\" !text-foreground-neutral-subtle\">\n            Save\n          </Button>\n          <ButtonGroupSeparator />\n          <Button variant=\"secondary\" size=\"sm\" aria-label=\"More options\">\n            <Icon name=\"arrowDownSLine\" className=\"size-16 text-foreground-neutral-subtle\" />\n          </Button>\n        </ButtonGroup>\n      </div>\n\n      {/* With Input */}\n      <div className=\"flex flex-col gap-8\">\n        <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n          With Input\n        </Code>\n        <ButtonGroup className=\"w-320\" aria-label=\"Search\">\n          <Input placeholder=\"Search...\" aria-label=\"Search input\" />\n          <ButtonGroupSeparator />\n          <Button variant=\"secondary\" aria-label=\"Submit search\">\n            <Icon name=\"searchLine\" className=\"size-16 text-foreground-neutral-subtle\" />\n          </Button>\n        </ButtonGroup>\n      </div>\n\n      {/* Quantity Input */}\n      <div className=\"flex flex-col gap-8\">\n        <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n          Quantity Selector\n        </Code>\n        <ButtonGroup className=\"w-280\" aria-label=\"Quantity selector\">\n          <Button variant=\"secondary\" aria-label=\"Decrease\">\n            <Icon name=\"subtractLine\" className=\"size-16 text-foreground-neutral-subtle\" />\n          </Button>\n          <ButtonGroupSeparator />\n          <Input placeholder=\"1\" className=\"text-center\" aria-label=\"Quantity\" />\n          <ButtonGroupSeparator />\n          <Button variant=\"secondary\" aria-label=\"Increase\">\n            <Icon name=\"addLine\" className=\"size-16 text-foreground-neutral-subtle\" />\n          </Button>\n        </ButtonGroup>\n      </div>\n\n      {/* With Select */}\n      <div className=\"flex flex-col gap-8\">\n        <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n          With Select\n        </Code>\n        <SelectExample />\n      </div>\n\n      {/* With Popover */}\n      <div className=\"flex flex-col gap-8\">\n        <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n          With Popover\n        </Code>\n        <PopoverExample />\n      </div>\n\n      {/* Nested Groups */}\n      <div className=\"flex flex-col gap-8\">\n        <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n          Nested Groups\n        </Code>\n        <div className=\"inline-flex gap-8\">\n          <ButtonGroup aria-label=\"Page selection\">\n            <Button\n              variant=\"transparent\"\n              className=\"w-42 !text-foreground-neutral-subtle\"\n              aria-label=\"Page 1\"\n            >\n              1\n            </Button>\n            <ButtonGroupSeparator />\n            <Button\n              variant=\"transparent\"\n              className=\"w-42 !text-foreground-neutral-subtle\"\n              aria-label=\"Page 2\"\n            >\n              2\n            </Button>\n            <ButtonGroupSeparator />\n            <Button\n              variant=\"transparent\"\n              className=\"w-42 !text-foreground-neutral-subtle\"\n              aria-label=\"Page 3\"\n            >\n              3\n            </Button>\n            <ButtonGroupSeparator />\n            <Button\n              variant=\"transparent\"\n              className=\"w-42 !text-foreground-neutral-subtle\"\n              aria-label=\"Page 4\"\n            >\n              4\n            </Button>\n            <ButtonGroupSeparator />\n            <Button\n              variant=\"transparent\"\n              className=\"w-42 !text-foreground-neutral-subtle\"\n              aria-label=\"Page 5\"\n            >\n              5\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup aria-label=\"Pagination controls\">\n            <Button variant=\"transparent\" aria-label=\"Previous page\">\n              <Icon name=\"arrowLeftSLine\" className=\"size-16 text-foreground-neutral-subtle\" />\n            </Button>\n            <ButtonGroupSeparator />\n            <Button variant=\"transparent\" aria-label=\"Next page\">\n              <Icon name=\"arrowRightSLine\" className=\"size-16 text-foreground-neutral-subtle\" />\n            </Button>\n          </ButtonGroup>\n        </div>\n      </div>\n\n      {/* Disabled State */}\n      <div className=\"flex flex-col gap-8\">\n        <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n          Disabled State\n        </Code>\n        <ButtonGroup aria-label=\"Button group with disabled state\">\n          <Button variant=\"secondary\" size=\"sm\" className=\" !text-foreground-neutral-subtle\">\n            Enabled\n          </Button>\n          <ButtonGroupSeparator />\n          <Button variant=\"secondary\" size=\"sm\" disabled>\n            Disabled\n          </Button>\n          <ButtonGroupSeparator />\n          <Button variant=\"secondary\" size=\"sm\" className=\" !text-foreground-neutral-subtle\">\n            Enabled\n          </Button>\n        </ButtonGroup>\n      </div>\n    </div>\n  ),\n};\n"],"names":["useState","Button","Icon","Input","Popover","PopoverContent","PopoverTrigger","Select","SelectContent","SelectItem","SelectTrigger","SelectValue","Textarea","Code","Header","ButtonGroup","ButtonGroupSeparator","ButtonGroupText","meta","title","component","tags","parameters","docs","description","argTypes","orientation","control","options","defaultValue","SelectExample","currency","setCurrency","div","className","aria-label","value","onValueChange","align","placeholder","pattern","variant","name","PopoverExample","open","setOpen","onOpenChange","asChild","size","Default","render","disabled"],"mappings":"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"}

package/dist/components/button-group/index.d.ts

@@ -0,0 +1,2 @@
+export * from './button-group';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/button-group/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/button-group/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}

package/dist/components/button-group/index.js

@@ -0,0 +1,3 @@
+export * from './button-group.js';
+
+//# sourceMappingURL=index.js.map

package/dist/components/button-group/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/button-group/index.ts"],"sourcesContent":["export * from './button-group';\n"],"names":[],"mappings":"AAAA,cAAc,iBAAiB"}

package/dist/components/code-block/code-block-footer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"code-block-footer.d.ts","sourceRoot":"","sources":["../../../src/components/code-block/code-block-footer.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,cAAc,EAAE,cAAc,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAGrE,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAClE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC3B,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,OAAe,EACf,KAAiB,EACjB,OAAO,EACP,WAAW,EACX,IAAI,EACJ,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,oBAAoB,2CA0CtB;AAED,MAAM,MAAM,wBAAwB,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAC7D,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,EAClC,SAAS,EACT,OAAe,EACf,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,wBAAwB,2CAY1B;AAED,MAAM,MAAM,2BAA2B,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAChE,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,wBAAgB,sBAAsB,CAAC,EACrC,SAAS,EACT,OAAe,EACf,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,2BAA2B,2CAY7B;AAED,MAAM,MAAM,2BAA2B,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAChE,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,wBAAgB,sBAAsB,CAAC,EACrC,SAAS,EACT,OAAe,EACf,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,2BAA2B,2CAuB7B;AAED,MAAM,MAAM,+BAA+B,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IACpE,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,wBAAgB,0BAA0B,CAAC,EACzC,SAAS,EACT,OAAe,EACf,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,+BAA+B,2CAuBjC"}
+{"version":3,"file":"code-block-footer.d.ts","sourceRoot":"","sources":["../../../src/components/code-block/code-block-footer.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAC,cAAc,EAAE,cAAc,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAIrE,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAClE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC3B,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,OAAe,EACf,KAAiB,EACjB,OAAO,EACP,WAAW,EACX,IAAI,EACJ,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,oBAAoB,2CAwDtB;AAED,MAAM,MAAM,wBAAwB,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAC7D,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,EAClC,SAAS,EACT,OAAe,EACf,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,wBAAwB,2CAY1B;AAED,MAAM,MAAM,2BAA2B,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAChE,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,wBAAgB,sBAAsB,CAAC,EACrC,SAAS,EACT,OAAe,EACf,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,2BAA2B,2CAY7B;AAED,MAAM,MAAM,2BAA2B,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAChE,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,wBAAgB,sBAAsB,CAAC,EACrC,SAAS,EACT,OAAe,EACf,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,2BAA2B,2CAuB7B;AAED,MAAM,MAAM,+BAA+B,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IACpE,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,wBAAgB,0BAA0B,CAAC,EACzC,SAAS,EACT,OAAe,EACf,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,+BAA+B,2CAuBjC"}

package/dist/components/code-block/code-block-footer.js

@@ -1,14 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Slot } from '@radix-ui/react-slot';
 import { Icon } from '../../components/icon/icon.js';
+import { ShinyText } from '../../components/shiny-text/index.js';
 import { Text } from '../../components/typography/index.js';
+import { useResolvedTheme } from '../../hooks/useResolvedTheme.js';
+import { ShipfoxLoader } from 'shipfox-loader-react';
 import { cn } from '../../utils/cn.js';
 export function CodeBlockFooter({ className, asChild = false, state = 'running', message, description, icon, children, ...props }) {
     const Comp = asChild ? Slot : 'div';
-    const defaultIcon = icon ?? (state === 'running' ? /*#__PURE__*/ _jsx(Icon, {
-        name: "shipfox",
-        className: "size-20",
-        "aria-hidden": "true"
+    const resolvedTheme = useResolvedTheme();
+    const defaultIcon = icon ?? (state === 'running' ? /*#__PURE__*/ _jsx(ShipfoxLoader, {
+        size: 20,
+        animation: "circular",
+        color: resolvedTheme === 'dark' ? 'white' : 'orange',
+        background: resolvedTheme === 'dark' ? 'dark' : 'light'
     }) : /*#__PURE__*/ _jsx(Icon, {
         name: "checkCircleSolid",
         className: "size-20 text-foreground-neutral-base",
@@ -34,7 +39,10 @@ export function CodeBlockFooter({ className, asChild = false, state = 'running',
             (message || description) && /*#__PURE__*/ _jsxs(CodeBlockFooterContent, {
                 children: [
                     message && /*#__PURE__*/ _jsx(CodeBlockFooterMessage, {
-                        children: message
+                        children: state === 'running' && typeof message === 'string' ? /*#__PURE__*/ _jsx(ShinyText, {
+                            text: message,
+                            speed: 3
+                        }) : message
                     }),
                     description && /*#__PURE__*/ _jsx(CodeBlockFooterDescription, {
                         children: description

package/dist/components/code-block/code-block-footer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/code-block/code-block-footer.tsx"],"sourcesContent":["import {Slot} from '@radix-ui/react-slot';\nimport {Icon} from 'components/icon/icon';\nimport {Text} from 'components/typography';\nimport type {ComponentProps, HTMLAttributes, ReactNode} from 'react';\nimport {cn} from 'utils/cn';\n\nexport type CodeBlockFooterProps = HTMLAttributes<HTMLDivElement> & {\n  asChild?: boolean;\n  state?: 'running' | 'done';\n  message?: ReactNode;\n  description?: ReactNode;\n  icon?: ReactNode;\n};\n\nexport function CodeBlockFooter({\n  className,\n  asChild = false,\n  state = 'running',\n  message,\n  description,\n  icon,\n  children,\n  ...props\n}: CodeBlockFooterProps) {\n  const Comp = asChild ? Slot : 'div';\n\n  const defaultIcon =\n    icon ??\n    (state === 'running' ? (\n      <Icon name=\"shipfox\" className=\"size-20\" aria-hidden=\"true\" />\n    ) : (\n      <Icon\n        name=\"checkCircleSolid\"\n        className=\"size-20 text-foreground-neutral-base\"\n        aria-hidden=\"true\"\n      />\n    ));\n\n  if (asChild || children) {\n    return (\n      <Comp\n        data-slot=\"code-block-footer\"\n        className={cn('flex w-full items-center justify-start gap-12 px-16 py-12', className)}\n        {...props}\n      >\n        {children}\n      </Comp>\n    );\n  }\n\n  return (\n    <Comp\n      data-slot=\"code-block-footer\"\n      className={cn('flex w-full items-center justify-start gap-12 px-16 py-12', className)}\n      {...props}\n    >\n      <CodeBlockFooterIcon className=\"text-tag-success-icon\">{defaultIcon}</CodeBlockFooterIcon>\n      {(message || description) && (\n        <CodeBlockFooterContent>\n          {message && <CodeBlockFooterMessage>{message}</CodeBlockFooterMessage>}\n          {description && <CodeBlockFooterDescription>{description}</CodeBlockFooterDescription>}\n        </CodeBlockFooterContent>\n      )}\n    </Comp>\n  );\n}\n\nexport type CodeBlockFooterIconProps = ComponentProps<'div'> & {\n  asChild?: boolean;\n};\n\nexport function CodeBlockFooterIcon({\n  className,\n  asChild = false,\n  children,\n  ...props\n}: CodeBlockFooterIconProps) {\n  const Comp = asChild ? Slot : 'div';\n\n  return (\n    <Comp\n      data-slot=\"code-block-footer-icon\"\n      className={cn('flex shrink-0 items-center justify-center size-20', className)}\n      {...props}\n    >\n      {children}\n    </Comp>\n  );\n}\n\nexport type CodeBlockFooterContentProps = ComponentProps<'div'> & {\n  asChild?: boolean;\n};\n\nexport function CodeBlockFooterContent({\n  className,\n  asChild = false,\n  children,\n  ...props\n}: CodeBlockFooterContentProps) {\n  const Comp = asChild ? Slot : 'div';\n\n  return (\n    <Comp\n      data-slot=\"code-block-footer-content\"\n      className={cn('flex flex-col items-start justify-center gap-0 min-w-0 flex-1', className)}\n      {...props}\n    >\n      {children}\n    </Comp>\n  );\n}\n\nexport type CodeBlockFooterMessageProps = ComponentProps<'div'> & {\n  asChild?: boolean;\n};\n\nexport function CodeBlockFooterMessage({\n  className,\n  asChild = false,\n  children,\n  ...props\n}: CodeBlockFooterMessageProps) {\n  if (asChild) {\n    return (\n      <Slot\n        data-slot=\"code-block-footer-message\"\n        className={cn('overflow-hidden text-ellipsis whitespace-nowrap text-xs', className)}\n        {...props}\n      >\n        {children}\n      </Slot>\n    );\n  }\n\n  return (\n    <Text\n      data-slot=\"code-block-footer-message\"\n      size=\"xs\"\n      className={cn('overflow-hidden text-ellipsis whitespace-nowrap', className)}\n      {...props}\n    >\n      {children}\n    </Text>\n  );\n}\n\nexport type CodeBlockFooterDescriptionProps = ComponentProps<'div'> & {\n  asChild?: boolean;\n};\n\nexport function CodeBlockFooterDescription({\n  className,\n  asChild = false,\n  children,\n  ...props\n}: CodeBlockFooterDescriptionProps) {\n  if (asChild) {\n    return (\n      <Slot\n        data-slot=\"code-block-footer-description\"\n        className={cn('text-xs text-foreground-neutral-subtle', className)}\n        {...props}\n      >\n        {children}\n      </Slot>\n    );\n  }\n\n  return (\n    <Text\n      data-slot=\"code-block-footer-description\"\n      size=\"xs\"\n      className={cn('text-foreground-neutral-subtle', className)}\n      {...props}\n    >\n      {children}\n    </Text>\n  );\n}\n"],"names":["Slot","Icon","Text","cn","CodeBlockFooter","className","asChild","state","message","description","icon","children","props","Comp","defaultIcon","name","aria-hidden","data-slot","CodeBlockFooterIcon","CodeBlockFooterContent","CodeBlockFooterMessage","CodeBlockFooterDescription","size"],"mappings":";AAAA,SAAQA,IAAI,QAAO,uBAAuB;AAC1C,SAAQC,IAAI,QAAO,uBAAuB;AAC1C,SAAQC,IAAI,QAAO,wBAAwB;AAE3C,SAAQC,EAAE,QAAO,WAAW;AAU5B,OAAO,SAASC,gBAAgB,EAC9BC,SAAS,EACTC,UAAU,KAAK,EACfC,QAAQ,SAAS,EACjBC,OAAO,EACPC,WAAW,EACXC,IAAI,EACJC,QAAQ,EACR,GAAGC,OACkB;IACrB,MAAMC,OAAOP,UAAUN,OAAO;IAE9B,MAAMc,cACJJ,QACCH,CAAAA,UAAU,0BACT,KAACN;QAAKc,MAAK;QAAUV,WAAU;QAAUW,eAAY;uBAErD,KAACf;QACCc,MAAK;QACLV,WAAU;QACVW,eAAY;MAEhB;IAEF,IAAIV,WAAWK,UAAU;QACvB,qBACE,KAACE;YACCI,aAAU;YACVZ,WAAWF,GAAG,6DAA6DE;YAC1E,GAAGO,KAAK;sBAERD;;IAGP;IAEA,qBACE,MAACE;QACCI,aAAU;QACVZ,WAAWF,GAAG,6DAA6DE;QAC1E,GAAGO,KAAK;;0BAET,KAACM;gBAAoBb,WAAU;0BAAyBS;;YACtDN,CAAAA,WAAWC,WAAU,mBACrB,MAACU;;oBACEX,yBAAW,KAACY;kCAAwBZ;;oBACpCC,6BAAe,KAACY;kCAA4BZ;;;;;;AAKvD;AAMA,OAAO,SAASS,oBAAoB,EAClCb,SAAS,EACTC,UAAU,KAAK,EACfK,QAAQ,EACR,GAAGC,OACsB;IACzB,MAAMC,OAAOP,UAAUN,OAAO;IAE9B,qBACE,KAACa;QACCI,aAAU;QACVZ,WAAWF,GAAG,qDAAqDE;QAClE,GAAGO,KAAK;kBAERD;;AAGP;AAMA,OAAO,SAASQ,uBAAuB,EACrCd,SAAS,EACTC,UAAU,KAAK,EACfK,QAAQ,EACR,GAAGC,OACyB;IAC5B,MAAMC,OAAOP,UAAUN,OAAO;IAE9B,qBACE,KAACa;QACCI,aAAU;QACVZ,WAAWF,GAAG,iEAAiEE;QAC9E,GAAGO,KAAK;kBAERD;;AAGP;AAMA,OAAO,SAASS,uBAAuB,EACrCf,SAAS,EACTC,UAAU,KAAK,EACfK,QAAQ,EACR,GAAGC,OACyB;IAC5B,IAAIN,SAAS;QACX,qBACE,KAACN;YACCiB,aAAU;YACVZ,WAAWF,GAAG,2DAA2DE;YACxE,GAAGO,KAAK;sBAERD;;IAGP;IAEA,qBACE,KAACT;QACCe,aAAU;QACVK,MAAK;QACLjB,WAAWF,GAAG,mDAAmDE;QAChE,GAAGO,KAAK;kBAERD;;AAGP;AAMA,OAAO,SAASU,2BAA2B,EACzChB,SAAS,EACTC,UAAU,KAAK,EACfK,QAAQ,EACR,GAAGC,OAC6B;IAChC,IAAIN,SAAS;QACX,qBACE,KAACN;YACCiB,aAAU;YACVZ,WAAWF,GAAG,0CAA0CE;YACvD,GAAGO,KAAK;sBAERD;;IAGP;IAEA,qBACE,KAACT;QACCe,aAAU;QACVK,MAAK;QACLjB,WAAWF,GAAG,kCAAkCE;QAC/C,GAAGO,KAAK;kBAERD;;AAGP"}
+{"version":3,"sources":["../../../src/components/code-block/code-block-footer.tsx"],"sourcesContent":["import {Slot} from '@radix-ui/react-slot';\nimport {Icon} from 'components/icon/icon';\nimport {ShinyText} from 'components/shiny-text';\nimport {Text} from 'components/typography';\nimport {useResolvedTheme} from 'hooks/useResolvedTheme';\nimport type {ComponentProps, HTMLAttributes, ReactNode} from 'react';\nimport {ShipfoxLoader} from 'shipfox-loader-react';\nimport {cn} from 'utils/cn';\n\nexport type CodeBlockFooterProps = HTMLAttributes<HTMLDivElement> & {\n  asChild?: boolean;\n  state?: 'running' | 'done';\n  message?: ReactNode;\n  description?: ReactNode;\n  icon?: ReactNode;\n};\n\nexport function CodeBlockFooter({\n  className,\n  asChild = false,\n  state = 'running',\n  message,\n  description,\n  icon,\n  children,\n  ...props\n}: CodeBlockFooterProps) {\n  const Comp = asChild ? Slot : 'div';\n  const resolvedTheme = useResolvedTheme();\n\n  const defaultIcon =\n    icon ??\n    (state === 'running' ? (\n      <ShipfoxLoader\n        size={20}\n        animation=\"circular\"\n        color={resolvedTheme === 'dark' ? 'white' : 'orange'}\n        background={resolvedTheme === 'dark' ? 'dark' : 'light'}\n      />\n    ) : (\n      <Icon\n        name=\"checkCircleSolid\"\n        className=\"size-20 text-foreground-neutral-base\"\n        aria-hidden=\"true\"\n      />\n    ));\n\n  if (asChild || children) {\n    return (\n      <Comp\n        data-slot=\"code-block-footer\"\n        className={cn('flex w-full items-center justify-start gap-12 px-16 py-12', className)}\n        {...props}\n      >\n        {children}\n      </Comp>\n    );\n  }\n\n  return (\n    <Comp\n      data-slot=\"code-block-footer\"\n      className={cn('flex w-full items-center justify-start gap-12 px-16 py-12', className)}\n      {...props}\n    >\n      <CodeBlockFooterIcon className=\"text-tag-success-icon\">{defaultIcon}</CodeBlockFooterIcon>\n      {(message || description) && (\n        <CodeBlockFooterContent>\n          {message && (\n            <CodeBlockFooterMessage>\n              {state === 'running' && typeof message === 'string' ? (\n                <ShinyText text={message} speed={3} />\n              ) : (\n                message\n              )}\n            </CodeBlockFooterMessage>\n          )}\n          {description && <CodeBlockFooterDescription>{description}</CodeBlockFooterDescription>}\n        </CodeBlockFooterContent>\n      )}\n    </Comp>\n  );\n}\n\nexport type CodeBlockFooterIconProps = ComponentProps<'div'> & {\n  asChild?: boolean;\n};\n\nexport function CodeBlockFooterIcon({\n  className,\n  asChild = false,\n  children,\n  ...props\n}: CodeBlockFooterIconProps) {\n  const Comp = asChild ? Slot : 'div';\n\n  return (\n    <Comp\n      data-slot=\"code-block-footer-icon\"\n      className={cn('flex shrink-0 items-center justify-center size-20', className)}\n      {...props}\n    >\n      {children}\n    </Comp>\n  );\n}\n\nexport type CodeBlockFooterContentProps = ComponentProps<'div'> & {\n  asChild?: boolean;\n};\n\nexport function CodeBlockFooterContent({\n  className,\n  asChild = false,\n  children,\n  ...props\n}: CodeBlockFooterContentProps) {\n  const Comp = asChild ? Slot : 'div';\n\n  return (\n    <Comp\n      data-slot=\"code-block-footer-content\"\n      className={cn('flex flex-col items-start justify-center gap-0 min-w-0 flex-1', className)}\n      {...props}\n    >\n      {children}\n    </Comp>\n  );\n}\n\nexport type CodeBlockFooterMessageProps = ComponentProps<'div'> & {\n  asChild?: boolean;\n};\n\nexport function CodeBlockFooterMessage({\n  className,\n  asChild = false,\n  children,\n  ...props\n}: CodeBlockFooterMessageProps) {\n  if (asChild) {\n    return (\n      <Slot\n        data-slot=\"code-block-footer-message\"\n        className={cn('overflow-hidden text-ellipsis whitespace-nowrap text-xs', className)}\n        {...props}\n      >\n        {children}\n      </Slot>\n    );\n  }\n\n  return (\n    <Text\n      data-slot=\"code-block-footer-message\"\n      size=\"xs\"\n      className={cn('overflow-hidden text-ellipsis whitespace-nowrap', className)}\n      {...props}\n    >\n      {children}\n    </Text>\n  );\n}\n\nexport type CodeBlockFooterDescriptionProps = ComponentProps<'div'> & {\n  asChild?: boolean;\n};\n\nexport function CodeBlockFooterDescription({\n  className,\n  asChild = false,\n  children,\n  ...props\n}: CodeBlockFooterDescriptionProps) {\n  if (asChild) {\n    return (\n      <Slot\n        data-slot=\"code-block-footer-description\"\n        className={cn('text-xs text-foreground-neutral-subtle', className)}\n        {...props}\n      >\n        {children}\n      </Slot>\n    );\n  }\n\n  return (\n    <Text\n      data-slot=\"code-block-footer-description\"\n      size=\"xs\"\n      className={cn('text-foreground-neutral-subtle', className)}\n      {...props}\n    >\n      {children}\n    </Text>\n  );\n}\n"],"names":["Slot","Icon","ShinyText","Text","useResolvedTheme","ShipfoxLoader","cn","CodeBlockFooter","className","asChild","state","message","description","icon","children","props","Comp","resolvedTheme","defaultIcon","size","animation","color","background","name","aria-hidden","data-slot","CodeBlockFooterIcon","CodeBlockFooterContent","CodeBlockFooterMessage","text","speed","CodeBlockFooterDescription"],"mappings":";AAAA,SAAQA,IAAI,QAAO,uBAAuB;AAC1C,SAAQC,IAAI,QAAO,uBAAuB;AAC1C,SAAQC,SAAS,QAAO,wBAAwB;AAChD,SAAQC,IAAI,QAAO,wBAAwB;AAC3C,SAAQC,gBAAgB,QAAO,yBAAyB;AAExD,SAAQC,aAAa,QAAO,uBAAuB;AACnD,SAAQC,EAAE,QAAO,WAAW;AAU5B,OAAO,SAASC,gBAAgB,EAC9BC,SAAS,EACTC,UAAU,KAAK,EACfC,QAAQ,SAAS,EACjBC,OAAO,EACPC,WAAW,EACXC,IAAI,EACJC,QAAQ,EACR,GAAGC,OACkB;IACrB,MAAMC,OAAOP,UAAUT,OAAO;IAC9B,MAAMiB,gBAAgBb;IAEtB,MAAMc,cACJL,QACCH,CAAAA,UAAU,0BACT,KAACL;QACCc,MAAM;QACNC,WAAU;QACVC,OAAOJ,kBAAkB,SAAS,UAAU;QAC5CK,YAAYL,kBAAkB,SAAS,SAAS;uBAGlD,KAAChB;QACCsB,MAAK;QACLf,WAAU;QACVgB,eAAY;MAEhB;IAEF,IAAIf,WAAWK,UAAU;QACvB,qBACE,KAACE;YACCS,aAAU;YACVjB,WAAWF,GAAG,6DAA6DE;YAC1E,GAAGO,KAAK;sBAERD;;IAGP;IAEA,qBACE,MAACE;QACCS,aAAU;QACVjB,WAAWF,GAAG,6DAA6DE;QAC1E,GAAGO,KAAK;;0BAET,KAACW;gBAAoBlB,WAAU;0BAAyBU;;YACtDP,CAAAA,WAAWC,WAAU,mBACrB,MAACe;;oBACEhB,yBACC,KAACiB;kCACElB,UAAU,aAAa,OAAOC,YAAY,yBACzC,KAACT;4BAAU2B,MAAMlB;4BAASmB,OAAO;6BAEjCnB;;oBAILC,6BAAe,KAACmB;kCAA4BnB;;;;;;AAKvD;AAMA,OAAO,SAASc,oBAAoB,EAClClB,SAAS,EACTC,UAAU,KAAK,EACfK,QAAQ,EACR,GAAGC,OACsB;IACzB,MAAMC,OAAOP,UAAUT,OAAO;IAE9B,qBACE,KAACgB;QACCS,aAAU;QACVjB,WAAWF,GAAG,qDAAqDE;QAClE,GAAGO,KAAK;kBAERD;;AAGP;AAMA,OAAO,SAASa,uBAAuB,EACrCnB,SAAS,EACTC,UAAU,KAAK,EACfK,QAAQ,EACR,GAAGC,OACyB;IAC5B,MAAMC,OAAOP,UAAUT,OAAO;IAE9B,qBACE,KAACgB;QACCS,aAAU;QACVjB,WAAWF,GAAG,iEAAiEE;QAC9E,GAAGO,KAAK;kBAERD;;AAGP;AAMA,OAAO,SAASc,uBAAuB,EACrCpB,SAAS,EACTC,UAAU,KAAK,EACfK,QAAQ,EACR,GAAGC,OACyB;IAC5B,IAAIN,SAAS;QACX,qBACE,KAACT;YACCyB,aAAU;YACVjB,WAAWF,GAAG,2DAA2DE;YACxE,GAAGO,KAAK;sBAERD;;IAGP;IAEA,qBACE,KAACX;QACCsB,aAAU;QACVN,MAAK;QACLX,WAAWF,GAAG,mDAAmDE;QAChE,GAAGO,KAAK;kBAERD;;AAGP;AAMA,OAAO,SAASiB,2BAA2B,EACzCvB,SAAS,EACTC,UAAU,KAAK,EACfK,QAAQ,EACR,GAAGC,OAC6B;IAChC,IAAIN,SAAS;QACX,qBACE,KAACT;YACCyB,aAAU;YACVjB,WAAWF,GAAG,0CAA0CE;YACvD,GAAGO,KAAK;sBAERD;;IAGP;IAEA,qBACE,KAACX;QACCsB,aAAU;QACVN,MAAK;QACLX,WAAWF,GAAG,kCAAkCE;QAC/C,GAAGO,KAAK;kBAERD;;AAGP"}

package/dist/components/command/command.d.ts

@@ -0,0 +1,28 @@
+import { type VariantProps } from 'class-variance-authority';
+import { Command as CommandPrimitive } from 'cmdk';
+import { type ComponentProps } from 'react';
+import { Kbd } from '../kbd';
+declare const commandTriggerVariants: (props?: ({
+    variant?: "base" | "component" | null | undefined;
+    size?: "base" | "small" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type CommandTriggerProps = ComponentProps<'button'> & VariantProps<typeof commandTriggerVariants> & {
+    placeholder?: string;
+};
+declare const CommandTrigger: import("react").ForwardRefExoticComponent<Omit<CommandTriggerProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+declare function Command({ className, ...props }: ComponentProps<typeof CommandPrimitive>): import("react/jsx-runtime").JSX.Element;
+declare function CommandDialog({ children, ...props }: ComponentProps<typeof CommandPrimitive.Dialog>): import("react/jsx-runtime").JSX.Element;
+type CommandInputProps = ComponentProps<typeof CommandPrimitive.Input> & {
+    showClearButton?: boolean;
+    onClear?: () => void;
+};
+declare function CommandInput({ className, value, onValueChange, onClear, showClearButton, ...props }: CommandInputProps): import("react/jsx-runtime").JSX.Element;
+declare function CommandList({ className, ...props }: ComponentProps<typeof CommandPrimitive.List>): import("react/jsx-runtime").JSX.Element;
+declare function CommandEmpty({ className, ...props }: ComponentProps<typeof CommandPrimitive.Empty>): import("react/jsx-runtime").JSX.Element;
+declare function CommandGroup({ className, ...props }: ComponentProps<typeof CommandPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
+declare function CommandSeparator({ className, ...props }: ComponentProps<typeof CommandPrimitive.Separator>): import("react/jsx-runtime").JSX.Element;
+declare function CommandItem({ className, ...props }: ComponentProps<typeof CommandPrimitive.Item>): import("react/jsx-runtime").JSX.Element;
+declare function CommandShortcut({ className, children, ...props }: ComponentProps<typeof Kbd>): import("react/jsx-runtime").JSX.Element;
+export { Command, CommandTrigger, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator, CommandShortcut, commandTriggerVariants, };
+export type { CommandTriggerProps, CommandInputProps };
+//# sourceMappingURL=command.d.ts.map

package/dist/components/command/command.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"command.d.ts","sourceRoot":"","sources":["../../../src/components/command/command.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,YAAY,EAAC,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAC,OAAO,IAAI,gBAAgB,EAAC,MAAM,MAAM,CAAC;AACjD,OAAO,EAAC,KAAK,cAAc,EAAoC,MAAM,OAAO,CAAC;AAG7E,OAAO,EAAC,GAAG,EAAC,MAAM,QAAQ,CAAC;AAE3B,QAAA,MAAM,sBAAsB;;;8EA0B3B,CAAC;AAEF,KAAK,mBAAmB,GAAG,cAAc,CAAC,QAAQ,CAAC,GACjD,YAAY,CAAC,OAAO,sBAAsB,CAAC,GAAG;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEJ,QAAA,MAAM,cAAc,gIAsBnB,CAAC;AAGF,iBAAS,OAAO,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,2CAY9E;AAED,iBAAS,aAAa,CAAC,EAAC,QAAQ,EAAE,GAAG,KAAK,EAAC,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,MAAM,CAAC,2CAS1F;AAED,KAAK,iBAAiB,GAAG,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,GAAG;IACvE,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,KAAK,EACL,aAAa,EACb,OAAO,EACP,eAAsB,EACtB,GAAG,KAAK,EACT,EAAE,iBAAiB,2CAkEnB;AAED,iBAAS,WAAW,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,2CAQvF;AAED,iBAAS,YAAY,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,2CAQzF;AAED,iBAAS,YAAY,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,2CAezF;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,SAAS,CAAC,2CAcnD;AAED,iBAAS,WAAW,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,2CAcvF;AAED,iBAAS,eAAe,CAAC,EAAC,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAC,EAAE,cAAc,CAAC,OAAO,GAAG,CAAC,2CAMnF;AAED,OAAO,EACL,OAAO,EACP,cAAc,EACd,aAAa,EACb,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,gBAAgB,EAChB,eAAe,EACf,sBAAsB,GACvB,CAAC;AAEF,YAAY,EAAC,mBAAmB,EAAE,iBAAiB,EAAC,CAAC"}

package/dist/components/command/command.js

@@ -0,0 +1,190 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cva } from 'class-variance-authority';
+import { Command as CommandPrimitive } from 'cmdk';
+import { forwardRef, useCallback, useState } from 'react';
+import { cn } from '../../utils/cn.js';
+import { Icon } from '../icon/index.js';
+import { Kbd } from '../kbd/index.js';
+const commandTriggerVariants = cva([
+    'flex items-center justify-between gap-8',
+    'w-full rounded-6 px-8 text-sm leading-20',
+    'bg-background-field-base text-foreground-neutral-base',
+    'shadow-button-neutral transition-[color,box-shadow] outline-none',
+    'hover:bg-background-field-hover cursor-pointer',
+    'focus-visible:shadow-border-interactive-with-active',
+    'disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-background-neutral-disabled disabled:shadow-none disabled:text-foreground-neutral-disabled'
+], {
+    variants: {
+        variant: {
+            base: 'bg-background-field-base',
+            component: 'bg-background-field-component'
+        },
+        size: {
+            small: 'h-28 py-4',
+            base: 'h-32 py-6'
+        }
+    },
+    defaultVariants: {
+        variant: 'base',
+        size: 'base'
+    }
+});
+const CommandTrigger = /*#__PURE__*/ forwardRef(({ className, variant, size, placeholder, children, ...props }, ref)=>{
+    const hasValue = Boolean(children);
+    return /*#__PURE__*/ _jsxs("button", {
+        ref: ref,
+        type: "button",
+        "data-slot": "command-trigger",
+        "data-placeholder": !hasValue || undefined,
+        className: cn(commandTriggerVariants({
+            variant,
+            size
+        }), 'data-placeholder:text-foreground-neutral-muted', className),
+        ...props,
+        children: [
+            /*#__PURE__*/ _jsx("span", {
+                className: "flex-1 text-left truncate",
+                children: hasValue ? children : placeholder
+            }),
+            /*#__PURE__*/ _jsx(Icon, {
+                name: "arrowDownSLine",
+                className: "size-16 text-foreground-neutral-muted shrink-0"
+            })
+        ]
+    });
+});
+CommandTrigger.displayName = 'CommandTrigger';
+function Command({ className, ...props }) {
+    return /*#__PURE__*/ _jsx(CommandPrimitive, {
+        "data-slot": "command",
+        className: cn('flex h-full w-full flex-col overflow-hidden rounded-10', 'bg-background-neutral-overlay text-foreground-neutral-base', className),
+        ...props
+    });
+}
+function CommandDialog({ children, ...props }) {
+    return /*#__PURE__*/ _jsxs(CommandPrimitive.Dialog, {
+        "data-slot": "command-dialog",
+        ...props,
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                className: "fixed inset-0 z-50 bg-background-neutral-overlay/80 backdrop-blur-sm"
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: "fixed left-1/2 top-1/2 z-50 w-full max-w-600 -translate-x-1/2 -translate-y-1/2 p-16",
+                children: /*#__PURE__*/ _jsx(Command, {
+                    className: "shadow-tooltip",
+                    children: children
+                })
+            })
+        ]
+    });
+}
+function CommandInput({ className, value, onValueChange, onClear, showClearButton = true, ...props }) {
+    const [internalValue, setInternalValue] = useState('');
+    const isControlled = value !== undefined;
+    const inputValue = isControlled ? value : internalValue;
+    const hasValue = Boolean(inputValue);
+    const handleValueChange = useCallback((newValue)=>{
+        if (!isControlled) {
+            setInternalValue(newValue);
+        }
+        onValueChange?.(newValue);
+    }, [
+        isControlled,
+        onValueChange
+    ]);
+    const handleClear = useCallback(()=>{
+        if (!isControlled) {
+            setInternalValue('');
+        }
+        onValueChange?.('');
+        onClear?.();
+    }, [
+        isControlled,
+        onValueChange,
+        onClear
+    ]);
+    const handleKeyDown = useCallback((e)=>{
+        if (e.key === 'Escape' && hasValue) {
+            e.preventDefault();
+            e.stopPropagation();
+            handleClear();
+        }
+    }, [
+        hasValue,
+        handleClear
+    ]);
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "flex items-center gap-8 border-b border-border-neutral-strong p-8",
+        children: [
+            /*#__PURE__*/ _jsx(Icon, {
+                name: "searchLine",
+                className: "size-16 shrink-0 text-foreground-neutral-muted"
+            }),
+            /*#__PURE__*/ _jsx(CommandPrimitive.Input, {
+                "data-slot": "command-input",
+                value: inputValue,
+                onValueChange: handleValueChange,
+                onKeyDown: handleKeyDown,
+                className: cn('flex-1 bg-transparent text-sm leading-20 outline-none', 'placeholder:text-foreground-neutral-muted', 'disabled:cursor-not-allowed disabled:text-foreground-neutral-disabled', className),
+                ...props
+            }),
+            showClearButton && hasValue && /*#__PURE__*/ _jsx("button", {
+                type: "button",
+                onClick: handleClear,
+                className: cn('shrink-0 cursor-pointer rounded-4 p-2', 'text-foreground-neutral-muted hover:text-foreground-neutral-subtle transition-colors'),
+                "aria-label": "Clear search",
+                children: /*#__PURE__*/ _jsx(Icon, {
+                    name: "closeLine",
+                    className: "size-16"
+                })
+            })
+        ]
+    });
+}
+function CommandList({ className, ...props }) {
+    return /*#__PURE__*/ _jsx(CommandPrimitive.List, {
+        "data-slot": "command-list",
+        className: cn('max-h-300 overflow-y-auto overflow-x-hidden p-4 scrollbar', className),
+        ...props
+    });
+}
+function CommandEmpty({ className, ...props }) {
+    return /*#__PURE__*/ _jsx(CommandPrimitive.Empty, {
+        "data-slot": "command-empty",
+        className: cn('py-24 text-center text-sm text-foreground-neutral-muted', className),
+        ...props
+    });
+}
+function CommandGroup({ className, ...props }) {
+    return /*#__PURE__*/ _jsx(CommandPrimitive.Group, {
+        "data-slot": "command-group",
+        className: cn('overflow-hidden', '[&_[cmdk-group-heading]]:px-8 [&_[cmdk-group-heading]]:py-4', '[&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:leading-20', '[&_[cmdk-group-heading]]:text-foreground-neutral-subtle', '[&_[cmdk-group-heading]]:select-none', className),
+        ...props
+    });
+}
+function CommandSeparator({ className, ...props }) {
+    return /*#__PURE__*/ _jsx(CommandPrimitive.Separator, {
+        "data-slot": "command-separator",
+        className: cn('relative -mx-4 my-4 h-px', 'bg-border-neutral-menu-top', 'after:absolute after:inset-x-0 after:top-px after:h-px', 'after:bg-border-neutral-menu-bottom', className),
+        ...props
+    });
+}
+function CommandItem({ className, ...props }) {
+    return /*#__PURE__*/ _jsx(CommandPrimitive.Item, {
+        "data-slot": "command-item",
+        className: cn('relative flex cursor-pointer select-none items-center gap-8 rounded-6 px-8 py-6', 'text-sm leading-20 text-foreground-neutral-subtle outline-none transition-colors', 'aria-selected:bg-background-components-hover aria-selected:text-foreground-neutral-base', 'data-[disabled=true]:pointer-events-none data-[disabled=true]:text-foreground-neutral-disabled', className),
+        ...props
+    });
+}
+function CommandShortcut({ className, children, ...props }) {
+    return /*#__PURE__*/ _jsx(Kbd, {
+        "data-slot": "command-shortcut",
+        className: cn('ml-auto', className),
+        ...props,
+        children: children
+    });
+}
+export { Command, CommandTrigger, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator, CommandShortcut, commandTriggerVariants };
+
+//# sourceMappingURL=command.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/command/command.tsx"],"sourcesContent":["import {cva, type VariantProps} from 'class-variance-authority';\nimport {Command as CommandPrimitive} from 'cmdk';\nimport {type ComponentProps, forwardRef, useCallback, useState} from 'react';\nimport {cn} from 'utils/cn';\nimport {Icon} from '../icon';\nimport {Kbd} from '../kbd';\n\nconst commandTriggerVariants = cva(\n  [\n    'flex items-center justify-between gap-8',\n    'w-full rounded-6 px-8 text-sm leading-20',\n    'bg-background-field-base text-foreground-neutral-base',\n    'shadow-button-neutral transition-[color,box-shadow] outline-none',\n    'hover:bg-background-field-hover cursor-pointer',\n    'focus-visible:shadow-border-interactive-with-active',\n    'disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-background-neutral-disabled disabled:shadow-none disabled:text-foreground-neutral-disabled',\n  ],\n  {\n    variants: {\n      variant: {\n        base: 'bg-background-field-base',\n        component: 'bg-background-field-component',\n      },\n      size: {\n        small: 'h-28 py-4',\n        base: 'h-32 py-6',\n      },\n    },\n    defaultVariants: {\n      variant: 'base',\n      size: 'base',\n    },\n  },\n);\n\ntype CommandTriggerProps = ComponentProps<'button'> &\n  VariantProps<typeof commandTriggerVariants> & {\n    placeholder?: string;\n  };\n\nconst CommandTrigger = forwardRef<HTMLButtonElement, CommandTriggerProps>(\n  ({className, variant, size, placeholder, children, ...props}, ref) => {\n    const hasValue = Boolean(children);\n\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        data-slot=\"command-trigger\"\n        data-placeholder={!hasValue || undefined}\n        className={cn(\n          commandTriggerVariants({variant, size}),\n          'data-placeholder:text-foreground-neutral-muted',\n          className,\n        )}\n        {...props}\n      >\n        <span className=\"flex-1 text-left truncate\">{hasValue ? children : placeholder}</span>\n        <Icon name=\"arrowDownSLine\" className=\"size-16 text-foreground-neutral-muted shrink-0\" />\n      </button>\n    );\n  },\n);\nCommandTrigger.displayName = 'CommandTrigger';\n\nfunction Command({className, ...props}: ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn(\n        'flex h-full w-full flex-col overflow-hidden rounded-10',\n        'bg-background-neutral-overlay text-foreground-neutral-base',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CommandDialog({children, ...props}: ComponentProps<typeof CommandPrimitive.Dialog>) {\n  return (\n    <CommandPrimitive.Dialog data-slot=\"command-dialog\" {...props}>\n      <div className=\"fixed inset-0 z-50 bg-background-neutral-overlay/80 backdrop-blur-sm\" />\n      <div className=\"fixed left-1/2 top-1/2 z-50 w-full max-w-600 -translate-x-1/2 -translate-y-1/2 p-16\">\n        <Command className=\"shadow-tooltip\">{children}</Command>\n      </div>\n    </CommandPrimitive.Dialog>\n  );\n}\n\ntype CommandInputProps = ComponentProps<typeof CommandPrimitive.Input> & {\n  showClearButton?: boolean;\n  onClear?: () => void;\n};\n\nfunction CommandInput({\n  className,\n  value,\n  onValueChange,\n  onClear,\n  showClearButton = true,\n  ...props\n}: CommandInputProps) {\n  const [internalValue, setInternalValue] = useState('');\n  const isControlled = value !== undefined;\n  const inputValue = isControlled ? value : internalValue;\n  const hasValue = Boolean(inputValue);\n\n  const handleValueChange = useCallback(\n    (newValue: string) => {\n      if (!isControlled) {\n        setInternalValue(newValue);\n      }\n      onValueChange?.(newValue);\n    },\n    [isControlled, onValueChange],\n  );\n\n  const handleClear = useCallback(() => {\n    if (!isControlled) {\n      setInternalValue('');\n    }\n    onValueChange?.('');\n    onClear?.();\n  }, [isControlled, onValueChange, onClear]);\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (e.key === 'Escape' && hasValue) {\n        e.preventDefault();\n        e.stopPropagation();\n        handleClear();\n      }\n    },\n    [hasValue, handleClear],\n  );\n\n  return (\n    <div className=\"flex items-center gap-8 border-b border-border-neutral-strong p-8\">\n      <Icon name=\"searchLine\" className=\"size-16 shrink-0 text-foreground-neutral-muted\" />\n      <CommandPrimitive.Input\n        data-slot=\"command-input\"\n        value={inputValue}\n        onValueChange={handleValueChange}\n        onKeyDown={handleKeyDown}\n        className={cn(\n          'flex-1 bg-transparent text-sm leading-20 outline-none',\n          'placeholder:text-foreground-neutral-muted',\n          'disabled:cursor-not-allowed disabled:text-foreground-neutral-disabled',\n          className,\n        )}\n        {...props}\n      />\n      {showClearButton && hasValue && (\n        <button\n          type=\"button\"\n          onClick={handleClear}\n          className={cn(\n            'shrink-0 cursor-pointer rounded-4 p-2',\n            'text-foreground-neutral-muted hover:text-foreground-neutral-subtle transition-colors',\n          )}\n          aria-label=\"Clear search\"\n        >\n          <Icon name=\"closeLine\" className=\"size-16\" />\n        </button>\n      )}\n    </div>\n  );\n}\n\nfunction CommandList({className, ...props}: ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"command-list\"\n      className={cn('max-h-300 overflow-y-auto overflow-x-hidden p-4 scrollbar', className)}\n      {...props}\n    />\n  );\n}\n\nfunction CommandEmpty({className, ...props}: ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      data-slot=\"command-empty\"\n      className={cn('py-24 text-center text-sm text-foreground-neutral-muted', className)}\n      {...props}\n    />\n  );\n}\n\nfunction CommandGroup({className, ...props}: ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      data-slot=\"command-group\"\n      className={cn(\n        'overflow-hidden',\n        '[&_[cmdk-group-heading]]:px-8 [&_[cmdk-group-heading]]:py-4',\n        '[&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:leading-20',\n        '[&_[cmdk-group-heading]]:text-foreground-neutral-subtle',\n        '[&_[cmdk-group-heading]]:select-none',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CommandSeparator({\n  className,\n  ...props\n}: ComponentProps<typeof CommandPrimitive.Separator>) {\n  return (\n    <CommandPrimitive.Separator\n      data-slot=\"command-separator\"\n      className={cn(\n        'relative -mx-4 my-4 h-px',\n        'bg-border-neutral-menu-top',\n        'after:absolute after:inset-x-0 after:top-px after:h-px',\n        'after:bg-border-neutral-menu-bottom',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CommandItem({className, ...props}: ComponentProps<typeof CommandPrimitive.Item>) {\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"command-item\"\n      className={cn(\n        'relative flex cursor-pointer select-none items-center gap-8 rounded-6 px-8 py-6',\n        'text-sm leading-20 text-foreground-neutral-subtle outline-none transition-colors',\n        'aria-selected:bg-background-components-hover aria-selected:text-foreground-neutral-base',\n        'data-[disabled=true]:pointer-events-none data-[disabled=true]:text-foreground-neutral-disabled',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CommandShortcut({className, children, ...props}: ComponentProps<typeof Kbd>) {\n  return (\n    <Kbd data-slot=\"command-shortcut\" className={cn('ml-auto', className)} {...props}>\n      {children}\n    </Kbd>\n  );\n}\n\nexport {\n  Command,\n  CommandTrigger,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandSeparator,\n  CommandShortcut,\n  commandTriggerVariants,\n};\n\nexport type {CommandTriggerProps, CommandInputProps};\n"],"names":["cva","Command","CommandPrimitive","forwardRef","useCallback","useState","cn","Icon","Kbd","commandTriggerVariants","variants","variant","base","component","size","small","defaultVariants","CommandTrigger","className","placeholder","children","props","ref","hasValue","Boolean","button","type","data-slot","data-placeholder","undefined","span","name","displayName","CommandDialog","Dialog","div","CommandInput","value","onValueChange","onClear","showClearButton","internalValue","setInternalValue","isControlled","inputValue","handleValueChange","newValue","handleClear","handleKeyDown","e","key","preventDefault","stopPropagation","Input","onKeyDown","onClick","aria-label","CommandList","List","CommandEmpty","Empty","CommandGroup","Group","CommandSeparator","Separator","CommandItem","Item","CommandShortcut"],"mappings":"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"}