@trading-game/design-intelligence-layer 0.8.7 → 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 (10) hide show
  1. package/README.md +19 -0
  2. package/dist/index.cjs +8 -4
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.d.cts +2 -1
  5. package/dist/index.d.ts +2 -1
  6. package/dist/index.js +8 -4
  7. package/dist/index.js.map +1 -1
  8. package/guides/design-system-guide/trading-game-ds-guide.md +43 -3
  9. package/package.json +1 -1
  10. package/src/styles.css +28 -1
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;
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;
package/dist/index.js CHANGED
@@ -4554,10 +4554,12 @@ function SelectTrigger(_a) {
4554
4554
  var _b = _a, {
4555
4555
  className,
4556
4556
  size = "default",
4557
+ readOnly = false,
4557
4558
  children
4558
4559
  } = _b, props = __objRest(_b, [
4559
4560
  "className",
4560
4561
  "size",
4562
+ "readOnly",
4561
4563
  "children"
4562
4564
  ]);
4563
4565
  return /* @__PURE__ */ jsxs19(
@@ -4565,14 +4567,16 @@ function SelectTrigger(_a) {
4565
4567
  __spreadProps(__spreadValues({
4566
4568
  "data-slot": "select-trigger",
4567
4569
  "data-size": size,
4570
+ "data-readonly": readOnly ? "" : void 0,
4571
+ disabled: readOnly || props.disabled,
4568
4572
  className: cn(
4569
- "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",
4570
4574
  className
4571
4575
  )
4572
4576
  }, props), {
4573
4577
  children: [
4574
4578
  children,
4575
- /* @__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") }) })
4576
4580
  ]
4577
4581
  })
4578
4582
  );
@@ -5883,7 +5887,7 @@ var tabsListVariants = cva11(
5883
5887
  {
5884
5888
  variants: {
5885
5889
  variant: {
5886
- default: "bg-subtle",
5890
+ default: "bg-tabs",
5887
5891
  line: "gap-1 bg-transparent"
5888
5892
  },
5889
5893
  size: {
@@ -5936,7 +5940,7 @@ function TabsTrigger(_a) {
5936
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",
5937
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",
5938
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",
5939
- "data-[state=active]:bg-background data-[state=active]:border-transparent data-[state=active]:text-primary data-[state=active]:font-semibold",
5943
+ "data-[state=active]:bg-tabs-active data-[state=active]:border-transparent data-[state=active]:text-primary data-[state=active]:font-semibold",
5940
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",
5941
5945
  iconPosition === "top" && "h-auto flex-col gap-1 py-2",
5942
5946
  iconPosition === "top" && "group-data-[size=sm]/tabs-list:gap-0.5 group-data-[size=sm]/tabs-list:py-1.5",