@trading-game/design-intelligence-layer 0.8.5 → 0.8.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/AGENTS.md +11 -11
  2. package/README.md +83 -14
  3. package/dist/index.cjs +48 -29
  4. package/dist/index.cjs.map +1 -1
  5. package/dist/index.d.cts +7 -3
  6. package/dist/index.d.ts +7 -3
  7. package/dist/index.js +48 -29
  8. package/dist/index.js.map +1 -1
  9. package/{docs → guides}/design-principles/trading-game-design-principles.md +6 -5
  10. package/guides/design-system-guide/trading-game-ds-guide.md +642 -0
  11. package/{docs → guides}/rules/design-system-consuming-project.mdc +1 -1
  12. package/package.json +2 -2
  13. package/src/styles.css +86 -42
  14. package/docs/design-system-guide/trading-game-ds-guide.md +0 -2193
  15. /package/{docs → guides}/accessibility-standards/trading-game-accessibility-standards.md +0 -0
  16. /package/{docs → guides}/personas/trading-game-player-field-guide.md +0 -0
  17. /package/{docs → guides}/tone-of-voice/trading-game-tone-of-voice-and-campaign-brief.md +0 -0
package/dist/index.d.cts CHANGED
@@ -460,8 +460,9 @@ declare function ScrollBar({ className, orientation, ...props }: React$1.Compone
460
460
  declare function Select({ ...props }: React$1.ComponentProps<typeof Select$1.Root>): react_jsx_runtime.JSX.Element;
461
461
  declare function SelectGroup({ ...props }: React$1.ComponentProps<typeof Select$1.Group>): react_jsx_runtime.JSX.Element;
462
462
  declare function SelectValue({ ...props }: React$1.ComponentProps<typeof Select$1.Value>): react_jsx_runtime.JSX.Element;
463
- declare function SelectTrigger({ className, size, children, ...props }: React$1.ComponentProps<typeof Select$1.Trigger> & {
463
+ declare function SelectTrigger({ className, size, readOnly, children, ...props }: React$1.ComponentProps<typeof Select$1.Trigger> & {
464
464
  size?: "sm" | "default";
465
+ readOnly?: boolean;
465
466
  }): react_jsx_runtime.JSX.Element;
466
467
  declare function SelectContent({ className, children, position, align, ...props }: React$1.ComponentProps<typeof Select$1.Content>): react_jsx_runtime.JSX.Element;
467
468
  declare function SelectLabel({ className, ...props }: React$1.ComponentProps<typeof Select$1.Label>): react_jsx_runtime.JSX.Element;
@@ -574,9 +575,12 @@ declare function TableCaption({ className, ...props }: React$1.ComponentProps<"c
574
575
  declare function Tabs({ className, orientation, ...props }: React$1.ComponentProps<typeof Tabs$1.Root>): react_jsx_runtime.JSX.Element;
575
576
  declare const tabsListVariants: (props?: ({
576
577
  variant?: "line" | "default" | null | undefined;
578
+ size?: "lg" | "md" | "sm" | null | undefined;
577
579
  } & class_variance_authority_types.ClassProp) | undefined) => string;
578
- declare function TabsList({ className, variant, ...props }: React$1.ComponentProps<typeof Tabs$1.List> & VariantProps<typeof tabsListVariants>): react_jsx_runtime.JSX.Element;
579
- declare function TabsTrigger({ className, ...props }: React$1.ComponentProps<typeof Tabs$1.Trigger>): react_jsx_runtime.JSX.Element;
580
+ declare function TabsList({ className, variant, size, ...props }: React$1.ComponentProps<typeof Tabs$1.List> & VariantProps<typeof tabsListVariants>): react_jsx_runtime.JSX.Element;
581
+ declare function TabsTrigger({ className, iconPosition, ...props }: React$1.ComponentProps<typeof Tabs$1.Trigger> & {
582
+ iconPosition?: "inline" | "top";
583
+ }): react_jsx_runtime.JSX.Element;
580
584
  declare function TabsContent({ className, ...props }: React$1.ComponentProps<typeof Tabs$1.Content>): react_jsx_runtime.JSX.Element;
581
585
 
582
586
  declare function Textarea({ className, ...props }: React$1.ComponentProps<"textarea">): react_jsx_runtime.JSX.Element;
package/dist/index.d.ts CHANGED
@@ -460,8 +460,9 @@ declare function ScrollBar({ className, orientation, ...props }: React$1.Compone
460
460
  declare function Select({ ...props }: React$1.ComponentProps<typeof Select$1.Root>): react_jsx_runtime.JSX.Element;
461
461
  declare function SelectGroup({ ...props }: React$1.ComponentProps<typeof Select$1.Group>): react_jsx_runtime.JSX.Element;
462
462
  declare function SelectValue({ ...props }: React$1.ComponentProps<typeof Select$1.Value>): react_jsx_runtime.JSX.Element;
463
- declare function SelectTrigger({ className, size, children, ...props }: React$1.ComponentProps<typeof Select$1.Trigger> & {
463
+ declare function SelectTrigger({ className, size, readOnly, children, ...props }: React$1.ComponentProps<typeof Select$1.Trigger> & {
464
464
  size?: "sm" | "default";
465
+ readOnly?: boolean;
465
466
  }): react_jsx_runtime.JSX.Element;
466
467
  declare function SelectContent({ className, children, position, align, ...props }: React$1.ComponentProps<typeof Select$1.Content>): react_jsx_runtime.JSX.Element;
467
468
  declare function SelectLabel({ className, ...props }: React$1.ComponentProps<typeof Select$1.Label>): react_jsx_runtime.JSX.Element;
@@ -574,9 +575,12 @@ declare function TableCaption({ className, ...props }: React$1.ComponentProps<"c
574
575
  declare function Tabs({ className, orientation, ...props }: React$1.ComponentProps<typeof Tabs$1.Root>): react_jsx_runtime.JSX.Element;
575
576
  declare const tabsListVariants: (props?: ({
576
577
  variant?: "line" | "default" | null | undefined;
578
+ size?: "lg" | "md" | "sm" | null | undefined;
577
579
  } & class_variance_authority_types.ClassProp) | undefined) => string;
578
- declare function TabsList({ className, variant, ...props }: React$1.ComponentProps<typeof Tabs$1.List> & VariantProps<typeof tabsListVariants>): react_jsx_runtime.JSX.Element;
579
- declare function TabsTrigger({ className, ...props }: React$1.ComponentProps<typeof Tabs$1.Trigger>): react_jsx_runtime.JSX.Element;
580
+ declare function TabsList({ className, variant, size, ...props }: React$1.ComponentProps<typeof Tabs$1.List> & VariantProps<typeof tabsListVariants>): react_jsx_runtime.JSX.Element;
581
+ declare function TabsTrigger({ className, iconPosition, ...props }: React$1.ComponentProps<typeof Tabs$1.Trigger> & {
582
+ iconPosition?: "inline" | "top";
583
+ }): react_jsx_runtime.JSX.Element;
580
584
  declare function TabsContent({ className, ...props }: React$1.ComponentProps<typeof Tabs$1.Content>): react_jsx_runtime.JSX.Element;
581
585
 
582
586
  declare function Textarea({ className, ...props }: React$1.ComponentProps<"textarea">): react_jsx_runtime.JSX.Element;
package/dist/index.js CHANGED
@@ -280,7 +280,7 @@ function AlertDialogContent(_a) {
280
280
  "data-slot": "alert-dialog-content",
281
281
  "data-size": size,
282
282
  className: cn(
283
- "group/alert-dialog-content fixed top-[50%] left-[50%] z-50 flex h-auto w-full max-w-[calc(100%-2rem)] flex-col translate-x-[-50%] translate-y-[-50%] gap-6 rounded-sm border border-border-subtle bg-background p-6 shadow-lg duration-200 data-[size=sm]:max-w-xs data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[size=default]:sm:max-w-lg",
283
+ "group/alert-dialog-content fixed top-[50%] left-[50%] z-50 flex h-auto w-full max-w-[calc(100%-2rem)] flex-col translate-x-[-50%] translate-y-[-50%] gap-6 rounded-sm border border-border-subtle bg-background p-6 shadow-lg duration-base data-[size=sm]:max-w-xs data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[size=default]:sm:max-w-lg",
284
284
  className
285
285
  )
286
286
  }, props)
@@ -379,11 +379,10 @@ function AlertDialogAction(_a) {
379
379
  "variant",
380
380
  "size"
381
381
  ]);
382
- return /* @__PURE__ */ jsx4(Button, { variant, size, asChild: true, children: /* @__PURE__ */ jsx4(
382
+ return /* @__PURE__ */ jsx4(Button, { variant, size, asChild: true, className: cn("group-data-[size=sm]/alert-dialog-content:w-full", className), children: /* @__PURE__ */ jsx4(
383
383
  AlertDialogPrimitive.Action,
384
384
  __spreadValues({
385
- "data-slot": "alert-dialog-action",
386
- className: cn(className)
385
+ "data-slot": "alert-dialog-action"
387
386
  }, props)
388
387
  ) });
389
388
  }
@@ -397,11 +396,10 @@ function AlertDialogCancel(_a) {
397
396
  "variant",
398
397
  "size"
399
398
  ]);
400
- return /* @__PURE__ */ jsx4(Button, { variant, size, asChild: true, children: /* @__PURE__ */ jsx4(
399
+ return /* @__PURE__ */ jsx4(Button, { variant, size, asChild: true, className: cn("group-data-[size=sm]/alert-dialog-content:w-full", className), children: /* @__PURE__ */ jsx4(
401
400
  AlertDialogPrimitive.Cancel,
402
401
  __spreadValues({
403
- "data-slot": "alert-dialog-cancel",
404
- className: cn(className)
402
+ "data-slot": "alert-dialog-cancel"
405
403
  }, props)
406
404
  ) });
407
405
  }
@@ -2015,7 +2013,7 @@ function DialogContent(_a) {
2015
2013
  __spreadProps(__spreadValues({
2016
2014
  "data-slot": "dialog-content",
2017
2015
  className: cn(
2018
- "fixed top-[50%] left-[50%] z-50 flex h-auto w-full max-w-[calc(100%-2rem)] flex-col translate-x-[-50%] translate-y-[-50%] gap-6 rounded-sm border border-border-subtle bg-background p-6 shadow-lg duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg",
2016
+ "fixed top-[50%] left-[50%] z-50 flex h-auto w-full max-w-[calc(100%-2rem)] flex-col translate-x-[-50%] translate-y-[-50%] gap-6 rounded-sm border border-border-subtle bg-background p-6 shadow-lg duration-base outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg",
2019
2017
  className
2020
2018
  )
2021
2019
  }, props), {
@@ -2588,7 +2586,7 @@ function DrawerFooter(_a) {
2588
2586
  "div",
2589
2587
  __spreadValues({
2590
2588
  "data-slot": "drawer-footer",
2591
- className: cn("mt-auto flex flex-col gap-2 p-4", className)
2589
+ className: cn("mt-auto flex flex-col gap-2 p-4 [&>*]:w-full", className)
2592
2590
  }, props)
2593
2591
  );
2594
2592
  }
@@ -3471,7 +3469,7 @@ function ItemSeparator(_a) {
3471
3469
  );
3472
3470
  }
3473
3471
  var itemVariants = cva7(
3474
- "group/item flex flex-wrap items-center rounded-md border border-transparent text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-secondary-hover",
3472
+ "group/item flex flex-wrap items-center rounded-md border border-transparent text-sm transition-colors duration-instant outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-secondary-hover",
3475
3473
  {
3476
3474
  variants: {
3477
3475
  variant: {
@@ -3659,7 +3657,7 @@ var linkVariants = cva8(
3659
3657
  {
3660
3658
  variants: {
3661
3659
  size: {
3662
- lg: "text-sm [&_svg:not([class*='size-'])]:size-4",
3660
+ lg: "text-base [&_svg:not([class*='size-'])]:size-4",
3663
3661
  md: "text-sm [&_svg:not([class*='size-'])]:size-4",
3664
3662
  sm: "text-xs [&_svg:not([class*='size-'])]:size-[14px]"
3665
3663
  }
@@ -4090,7 +4088,7 @@ function NavigationMenuTrigger(_a) {
4090
4088
  /* @__PURE__ */ jsx37(
4091
4089
  ChevronDownIcon5,
4092
4090
  {
4093
- className: "relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180",
4091
+ className: "relative top-[1px] ml-1 size-3 transition duration-slow group-data-[state=open]:rotate-180",
4094
4092
  "aria-hidden": "true"
4095
4093
  }
4096
4094
  )
@@ -4110,7 +4108,7 @@ function NavigationMenuContent(_a) {
4110
4108
  "data-slot": "navigation-menu-content",
4111
4109
  className: cn(
4112
4110
  "top-0 left-0 w-full p-2 pr-2.5 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out md:absolute md:w-auto",
4113
- "group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:border-border-subtle group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95",
4111
+ "group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:border-border-subtle group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-base **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95",
4114
4112
  className
4115
4113
  )
4116
4114
  }, props)
@@ -4556,10 +4554,12 @@ function SelectTrigger(_a) {
4556
4554
  var _b = _a, {
4557
4555
  className,
4558
4556
  size = "default",
4557
+ readOnly = false,
4559
4558
  children
4560
4559
  } = _b, props = __objRest(_b, [
4561
4560
  "className",
4562
4561
  "size",
4562
+ "readOnly",
4563
4563
  "children"
4564
4564
  ]);
4565
4565
  return /* @__PURE__ */ jsxs19(
@@ -4567,14 +4567,16 @@ function SelectTrigger(_a) {
4567
4567
  __spreadProps(__spreadValues({
4568
4568
  "data-slot": "select-trigger",
4569
4569
  "data-size": size,
4570
+ "data-readonly": readOnly ? "" : void 0,
4571
+ disabled: readOnly || props.disabled,
4570
4572
  className: cn(
4571
- "flex w-fit items-center justify-between gap-2 rounded-sm border border-input bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-on-subtle data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-on-subtle",
4573
+ "flex w-fit items-center justify-between gap-2 rounded-sm border border-input bg-background appearance-none px-3 py-2 text-sm whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-on-subtle data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-on-subtle data-[readonly]:cursor-default data-[readonly]:opacity-100",
4572
4574
  className
4573
4575
  )
4574
4576
  }, props), {
4575
4577
  children: [
4576
4578
  children,
4577
- /* @__PURE__ */ jsx44(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx44(ChevronDownIcon6, { className: "size-4 opacity-50" }) })
4579
+ /* @__PURE__ */ jsx44(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx44(ChevronDownIcon6, { className: cn("size-4", readOnly ? "opacity-30" : "opacity-50") }) })
4578
4580
  ]
4579
4581
  })
4580
4582
  );
@@ -4774,7 +4776,7 @@ function SheetContent(_a) {
4774
4776
  __spreadProps(__spreadValues({
4775
4777
  "data-slot": "sheet-content",
4776
4778
  className: cn(
4777
- "fixed z-50 flex flex-col gap-4 bg-background shadow-lg transition ease-in-out data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:animate-in data-[state=open]:duration-500",
4779
+ "fixed z-50 flex flex-col gap-4 bg-background shadow-lg transition ease-standard data-[state=closed]:animate-out data-[state=closed]:duration-slow data-[state=open]:animate-in data-[state=open]:duration-open",
4778
4780
  side === "right" && "inset-y-0 right-0 h-full w-3/4 border-l border-border-subtle data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
4779
4781
  side === "left" && "inset-y-0 left-0 h-full w-3/4 border-r border-border-subtle data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
4780
4782
  side === "top" && "inset-x-0 top-0 h-auto border-b border-border-subtle data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
@@ -5088,7 +5090,7 @@ function Sidebar(_a) {
5088
5090
  {
5089
5091
  "data-slot": "sidebar-gap",
5090
5092
  className: cn(
5091
- "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
5093
+ "relative w-(--sidebar-width) bg-transparent transition-[width] duration-base ease-linear",
5092
5094
  "group-data-[collapsible=offcanvas]:w-0",
5093
5095
  "group-data-[side=right]:rotate-180",
5094
5096
  variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
@@ -5100,7 +5102,7 @@ function Sidebar(_a) {
5100
5102
  __spreadProps(__spreadValues({
5101
5103
  "data-slot": "sidebar-container",
5102
5104
  className: cn(
5103
- "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
5105
+ "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-base ease-linear md:flex",
5104
5106
  side === "left" ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
5105
5107
  // Adjust the padding for floating and inset variants.
5106
5108
  variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
@@ -5881,51 +5883,68 @@ function Tabs(_a) {
5881
5883
  );
5882
5884
  }
5883
5885
  var tabsListVariants = cva11(
5884
- "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-on-subtle group-data-[orientation=horizontal]/tabs:h-9 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none",
5886
+ "group/tabs-list inline-flex w-fit items-center justify-center text-on-subtle group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none has-[[data-icon-position=top]]:h-auto",
5885
5887
  {
5886
5888
  variants: {
5887
5889
  variant: {
5888
- default: "bg-subtle",
5890
+ default: "bg-tabs",
5889
5891
  line: "gap-1 bg-transparent"
5892
+ },
5893
+ size: {
5894
+ sm: "h-8 rounded-md p-[2px]",
5895
+ md: "h-10 rounded-lg p-1",
5896
+ lg: "h-12 rounded-xl p-1.5"
5890
5897
  }
5891
5898
  },
5892
5899
  defaultVariants: {
5893
- variant: "default"
5900
+ variant: "default",
5901
+ size: "md"
5894
5902
  }
5895
5903
  }
5896
5904
  );
5897
5905
  function TabsList(_a) {
5898
5906
  var _b = _a, {
5899
5907
  className,
5900
- variant = "default"
5908
+ variant = "default",
5909
+ size = "md"
5901
5910
  } = _b, props = __objRest(_b, [
5902
5911
  "className",
5903
- "variant"
5912
+ "variant",
5913
+ "size"
5904
5914
  ]);
5905
5915
  return /* @__PURE__ */ jsx54(
5906
5916
  TabsPrimitive.List,
5907
5917
  __spreadValues({
5908
5918
  "data-slot": "tabs-list",
5909
5919
  "data-variant": variant,
5910
- className: cn(tabsListVariants({ variant }), className)
5920
+ "data-size": size,
5921
+ className: cn(tabsListVariants({ variant, size }), className)
5911
5922
  }, props)
5912
5923
  );
5913
5924
  }
5914
5925
  function TabsTrigger(_a) {
5915
5926
  var _b = _a, {
5916
- className
5927
+ className,
5928
+ iconPosition = "inline"
5917
5929
  } = _b, props = __objRest(_b, [
5918
- "className"
5930
+ "className",
5931
+ "iconPosition"
5919
5932
  ]);
5920
5933
  return /* @__PURE__ */ jsx54(
5921
5934
  TabsPrimitive.Trigger,
5922
5935
  __spreadValues({
5923
5936
  "data-slot": "tabs-trigger",
5937
+ "data-icon-position": iconPosition,
5924
5938
  className: cn(
5925
- "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-normal whitespace-nowrap text-on-prominent/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:bg-secondary-hover hover:text-on-prominent focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-none group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
5926
- "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent",
5927
- "data-[state=active]:bg-background data-[state=active]:border-transparent data-[state=active]:text-primary data-[state=active]:font-semibold",
5939
+ "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-3 py-1 text-sm font-normal whitespace-nowrap text-on-prominent/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:bg-secondary-hover hover:text-on-prominent focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-none group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
5940
+ "group-data-[size=sm]/tabs-list:gap-1 group-data-[size=sm]/tabs-list:rounded-sm group-data-[size=sm]/tabs-list:px-2 group-data-[size=sm]/tabs-list:text-xs",
5941
+ "group-data-[size=lg]/tabs-list:gap-2 group-data-[size=lg]/tabs-list:rounded-lg group-data-[size=lg]/tabs-list:px-4 group-data-[size=lg]/tabs-list:text-base",
5942
+ "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:hover:bg-transparent group-data-[variant=line]/tabs-list:hover:text-primary group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent",
5943
+ "data-[state=active]:bg-tabs-active data-[state=active]:border-transparent data-[state=active]:text-primary data-[state=active]:font-semibold",
5928
5944
  "after:absolute after:bg-primary after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
5945
+ iconPosition === "top" && "h-auto flex-col gap-1 py-2",
5946
+ iconPosition === "top" && "group-data-[size=sm]/tabs-list:gap-0.5 group-data-[size=sm]/tabs-list:py-1.5",
5947
+ iconPosition === "top" && "group-data-[size=lg]/tabs-list:gap-1.5 group-data-[size=lg]/tabs-list:py-2.5",
5929
5948
  className
5930
5949
  )
5931
5950
  }, props)