@choice-ui/react 1.7.5 → 1.7.7

package/dist/styles/components.css

@@ -362,6 +362,103 @@
   }
 }
 
+/* Panel row styles */
+@layer components {
+  .properties-panel {
+    @apply relative flex min-w-0 flex-col;
+    &:not(:last-child) {
+      @apply border-b;
+    }
+  }
+
+  .rows {
+    @apply grid min-w-0 items-center pr-2 pl-4;
+  }
+  .rows--label {
+    @apply text-secondary-foreground mt-1 select-none;
+    padding-right: 0.125rem;
+    padding-left: 0.125rem;
+    font-weight: 500;
+    font-size: 0.5625rem;
+    line-height: 0.875rem;
+    letter-spacing: 0.016875rem;
+  }
+  .rows--single {
+    @apply gap-x-2 pr-4;
+    grid-template-rows: auto minmax(2rem, auto);
+    grid-template-columns: 1fr;
+    grid-template-areas: "label" "input";
+  }
+  .rows--two-columns {
+    @apply gap-x-2 pr-4;
+    grid-template-rows: auto minmax(2rem, auto);
+    grid-template-columns: 1fr 1fr;
+    grid-template-areas: "label-1 label-2" "input-1 input-2";
+  }
+  .rows--one-label-one-input {
+    @apply gap-x-2 pr-4;
+    grid-template-rows: 2rem;
+    grid-template-columns: 8fr 20fr;
+    grid-template-areas: "label input";
+  }
+  .rows--one-label-one-input-one-icon {
+    @apply gap-x-1 pr-2;
+    grid-template-rows: 2rem;
+    grid-template-columns: 8fr 20fr 1.5rem;
+    grid-template-areas: "label input icon";
+  }
+  .rows--one-label-two-input {
+    @apply gap-x-2 pr-4;
+    grid-template-rows: 2rem;
+    grid-template-columns: 8fr 10fr 10fr;
+    grid-template-areas: "label input-1 input-2";
+  }
+  .rows--one-icon-one-input {
+    @apply gap-x-2 pr-4;
+    grid-template-rows: auto minmax(2rem, auto);
+    grid-template-columns: 1.5rem 1fr;
+    grid-template-areas: ". label" "icon input";
+  }
+  .rows--one-input-one-icon {
+    @apply gap-x-2;
+    grid-template-rows: auto minmax(2rem, auto);
+    grid-template-columns: 1fr 1.5rem;
+    grid-template-areas: "label label" "input icon";
+  }
+  .rows--one-input-two-icon {
+    grid-template-rows: auto minmax(2rem, auto);
+    grid-template-columns: 1fr 0.5rem 1.5rem 0.25rem 1.5rem;
+    grid-template-areas: "label . . . ." "input . icon-1 . icon-2";
+  }
+  .rows--two-input-two-icon {
+    grid-template-rows: auto minmax(2rem, auto);
+    grid-template-columns: minmax(76px, 1fr) 0.5rem 1fr 0.5rem 1.5rem 0.25rem 1.5rem;
+    grid-template-areas: "label-1 label-1 label-2 label-2 . . ." "input-1 . input-2 . icon-1 . icon-2";
+  }
+  .rows--two-input-one-icon {
+    @apply gap-x-2;
+    grid-template-rows: auto minmax(2rem, auto);
+    grid-template-columns: 1fr 1fr 1.5rem;
+    grid-template-areas: "label-1 label-2 label-2" "input-1 input-2 icon";
+  }
+  .rows--one-icon-one-input-one-icon {
+    grid-template-rows: auto minmax(2rem, auto);
+    grid-template-columns: 1.5rem 0.5rem 1fr 0.5rem 1.5rem;
+    grid-template-areas: "label label label label label" "icon-1 . input . icon-2";
+  }
+  .rows--one-icon-one-input-two-icon {
+    grid-template-rows: auto minmax(2rem, auto);
+    grid-template-columns: 1.5rem 0.5rem 1fr 0.5rem 1.5rem 0.25rem 1.5rem;
+    grid-template-areas: "label label label label label label label" "icon-1 . input . icon-2 . icon-3";
+  }
+  .rows--two-input-one-icon-double-row {
+    @apply gap-x-2;
+    grid-template-rows: auto 2rem 2rem;
+    grid-template-columns: 1fr 1fr 1.5rem;
+    grid-template-areas: "label-1 label-2 ." "input-1 input-3 icon-1" "input-2 input-3 icon-2";
+  }
+}
+
 /* Condition styles */
 @layer components {
   .condition__group {
@@ -414,6 +511,28 @@
   }
 }
 
+/* Skeleton styles */
+@layer components {
+  .skeleton {
+    transition: all 0.2s ease-in-out !important;
+    outline: none !important;
+    box-shadow: none !important;
+    border-color: transparent !important;
+    border-radius: var(--radius-md);
+    background-color: var(--color-secondary-background) !important;
+    resize: none !important;
+    pointer-events: none !important;
+    color: transparent !important;
+    &::placeholder,
+    &:placeholder-shown {
+      color: transparent !important;
+    }
+    & * {
+      visibility: hidden !important;
+    }
+  }
+}
+
 /* Comments styles */
 @layer components {
   .comments__input {
@@ -428,3 +547,110 @@
     column-gap: calc(var(--spacing) * 2);
   }
 }
+
+/* Fields styles */
+@layer components {
+  .fields__text-field {
+    grid-template-columns: auto 1fr auto;
+    grid-template-areas: "prefix input suffix";
+    &::before {
+      @apply pointer-events-none z-2 h-full border transform-3d;
+      grid-row: 1 / 2;
+      grid-column: 1 / 4;
+      border-radius: inherit;
+      content: "";
+    }
+  }
+
+  .input__number {
+    grid-template-columns: auto auto 1fr auto auto;
+    grid-template-areas: "prefix-handler variable input action suffix-handler";
+    &::before {
+      @apply pointer-events-none z-3 rounded-md border;
+      grid-row: 1 / 2;
+      grid-column: 1 / 6;
+      content: "";
+    }
+  }
+
+  .input__number--default {
+    grid-template-rows: 1.5rem;
+    &::before {
+      @apply h-6;
+    }
+  }
+
+  .input__number--large {
+    grid-template-rows: 2rem;
+    &::before {
+      @apply h-8;
+    }
+  }
+}
+
+/* Modal styles */
+@layer components {
+  .modal__header {
+    grid-template-rows: minmax(2.5rem, auto);
+    grid-template-areas: "title . close" "input input input";
+  }
+}
+
+/* OTP Input styles */
+@layer components {
+  .otp-input__caret {
+    animation: otp-caret-blink 1s ease-out infinite;
+  }
+
+  @keyframes otp-caret-blink {
+    0%,
+    70%,
+    100% {
+      opacity: 1;
+    }
+    20%,
+    50% {
+      opacity: 0;
+    }
+  }
+}
+
+/* Colors styles */
+
+@layer components {
+  .input-fill {
+    @apply relative grid;
+    &::before {
+      @apply pointer-events-none z-2 h-6 rounded-md border border-transparent;
+      grid-row: 1 / 2;
+    }
+  }
+  .input-fill--hex {
+    grid-template-columns: 1fr;
+    grid-template-areas: "input-1";
+    &::before {
+      grid-column: 1 / 2;
+    }
+  }
+  .input-fill--hex-and-alpha {
+    grid-template-columns: 1fr 2px 52px;
+    grid-template-areas: "input-1 . input-2";
+    &::before {
+      grid-column: 1 / 4;
+    }
+  }
+  .input-fill--rgb {
+    grid-template-columns: 1fr 2px 1fr 2px 1fr;
+    grid-template-areas: "input-1 . input-2 . input-3";
+    &::before {
+      grid-column: 1 / 6;
+    }
+  }
+  .input-fill--rgb-and-alpha {
+    grid-template-columns: 1fr 2px 1fr 2px 1fr 2px 48px;
+    grid-template-areas: "input-1 . input-2 . input-3 . input-4";
+    &::before {
+      grid-column: 1 / 8;
+    }
+  }
+}

package/dist/tailwind.css

@@ -1,5 +1,6 @@
 @import "tailwindcss";
 @plugin "@tailwindcss/typography";
+@plugin "@choice-ui/grid-areas";
 
 @import "@choice-ui/design-tokens/tokens.css";
 @import "@choice-ui/design-tokens/preflight.css";

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@choice-ui/react",
-  "version": "1.7.5",
+  "version": "1.7.7",
   "description": "A desktop-first React UI component library built for professional desktop applications with comprehensive documentation",
   "sideEffects": false,
   "type": "module",
   "source": "./app/index.ts",
   "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "types": "./app/index.ts",
   "files": [
     "dist",
     "README.md",
@@ -14,7 +14,7 @@
   ],
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
+      "types": "./app/index.ts",
       "import": "./dist/index.js"
     },
     "./styles/*": "./dist/styles/*",
@@ -22,10 +22,36 @@
     "./llms.txt": "./dist/llms.txt"
   },
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "types": "./dist/index.d.ts",
+    "main": "./dist/index.js",
+    "exports": {
+      ".": {
+        "types": "./dist/index.d.ts",
+        "import": "./dist/index.js"
+      },
+      "./styles/*": "./dist/styles/*",
+      "./tailwind.css": "./dist/tailwind.css",
+      "./llms.txt": "./dist/llms.txt"
+    }
+  },
+  "scripts": {
+    "build": "pnpm run clean && pnpm --filter @choice-ui/shared build && vite build",
+    "build:watch": "vite build --watch",
+    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,css,md}\"",
+    "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
+    "lint:types": "tsc",
+    "clean": "rimraf dist",
+    "prepublishOnly": "pnpm run build",
+    "plop": "pnpm dlx plop",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage",
+    "madge": "npx madge --circular --extensions ts app/"
   },
   "dependencies": {
     "@choiceform/icons-react": "^1.3.8",
+    "@choice-ui/design-tokens": "workspace:*",
     "classnames": "^2.5.1",
     "tailwind-merge": "^3.3.1",
     "tailwind-variants": "^3.1.0",
@@ -59,8 +85,7 @@
     "remark-breaks": "^4.0.0",
     "remark-math": "^6.0.0",
     "harden-react-markdown": "^1.0.4",
-    "shiki": "^3.9.2",
-    "@choice-ui/design-tokens": "0.2.13"
+    "shiki": "^3.9.2"
   },
   "devDependencies": {
     "@babel/core": "^7.27.1",
@@ -111,18 +136,5 @@
   "peerDependencies": {
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
-  },
-  "scripts": {
-    "build": "pnpm run clean && pnpm --filter @choice-ui/shared build && vite build",
-    "build:watch": "vite build --watch",
-    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,css,md}\"",
-    "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
-    "lint:types": "tsc",
-    "clean": "rimraf dist",
-    "plop": "pnpm dlx plop",
-    "test": "jest",
-    "test:watch": "jest --watch",
-    "test:coverage": "jest --coverage",
-    "madge": "npx madge --circular --extensions ts app/"
   }
-}
+}

package/dist/components/modal/src/styles/style.module.css

@@ -1,4 +0,0 @@
-._header_15lpo_1 {
-  grid-template-rows: minmax(2.5rem, auto);
-  grid-template-areas: "title . close" "input input input";
-}

package/dist/components/modal/src/styles/style.module.css.js

@@ -1,8 +0,0 @@
-import './style.module.css';const header = "_header_15lpo_1";
-const s = {
-  header
-};
-export {
-  s as default,
-  header
-};

package/dist/components/numeric-input/src/styles/style.module.css

@@ -1,45 +0,0 @@
-/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */
-@layer properties {
-  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-    *, :before, :after, ::backdrop {
-      --tw-border-style: solid;
-    }
-  }
-}
-
-._input_irmph_10 {
-  grid-template-columns: auto auto 1fr auto auto;
-  grid-template-areas: "prefix-handler variable input action suffix-handler";
-}
-
-._input_irmph_10:before {
-  pointer-events: none;
-  z-index: 3;
-  border-radius: var(--radius-md, .375rem);
-  border-style: var(--tw-border-style);
-  content: "";
-  border-width: 1px;
-  grid-area: 1 / 1 / 2 / 6;
-}
-
-._default_irmph_25 {
-  grid-template-rows: 1.5rem;
-}
-
-._default_irmph_25:before {
-  height: calc(var(--spacing, .25rem) * 6);
-}
-
-._large_irmph_33 {
-  grid-template-rows: 2rem;
-}
-
-._large_irmph_33:before {
-  height: calc(var(--spacing, .25rem) * 8);
-}
-
-@property --tw-border-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}

package/dist/components/numeric-input/src/styles/style.module.css.js

@@ -1,12 +0,0 @@
-import './style.module.css';const input = "_input_irmph_10";
-const large = "_large_irmph_33";
-const s = {
-  input,
-  "default": "_default_irmph_25",
-  large
-};
-export {
-  s as default,
-  input,
-  large
-};

package/dist/components/otp-input/src/styles/style.module.css

@@ -1,15 +0,0 @@
-._caret_giwn8_1 {
-  animation: _otp-caret-blink_giwn8_1 1s ease-out infinite;
-}
-
-@keyframes _otp-caret-blink_giwn8_1 {
-  0%,
-  70%,
-  100% {
-    opacity: 1;
-  }
-  20%,
-  50% {
-    opacity: 0;
-  }
-}

package/dist/components/otp-input/src/styles/style.module.css.js

@@ -1,8 +0,0 @@
-import './style.module.css';const caret = "_caret_giwn8_1";
-const s = {
-  caret
-};
-export {
-  caret,
-  s as default
-};

package/dist/components/panel/src/styles/style.module.css

@@ -1,103 +0,0 @@
-/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */
-._label_yadvv_2 {
-  margin-top: calc(var(--spacing, .25rem) * 1);
-  -webkit-user-select: none;
-  user-select: none;
-  letter-spacing: .016875rem;
-  padding-left: .125rem;
-  padding-right: .125rem;
-  font-size: .5625rem;
-  font-weight: 500;
-  line-height: .875rem;
-}
-
-._single_yadvv_14 {
-  column-gap: calc(var(--spacing, .25rem) * 2);
-  padding-right: calc(var(--spacing, .25rem) * 4);
-  grid-template: "label"
-                 "input" minmax(2rem, auto)
-                 / 1fr;
-}
-
-._two-columns_yadvv_22 {
-  column-gap: calc(var(--spacing, .25rem) * 2);
-  padding-right: calc(var(--spacing, .25rem) * 4);
-  grid-template: "label-1 label-2"
-                 "input-1 input-2" minmax(2rem, auto)
-                 / 1fr 1fr;
-}
-
-._one-label-one-input_yadvv_30 {
-  column-gap: calc(var(--spacing, .25rem) * 2);
-  padding-right: calc(var(--spacing, .25rem) * 4);
-  grid-template: "label input" 2rem
-  / 8fr 20fr;
-}
-
-._one-label-one-input-one-icon_yadvv_37 {
-  column-gap: calc(var(--spacing, .25rem) * 1);
-  padding-right: calc(var(--spacing, .25rem) * 2);
-  grid-template: "label input icon" 2rem
-  / 8fr 20fr 1.5rem;
-}
-
-._one-label-two-input_yadvv_44 {
-  column-gap: calc(var(--spacing, .25rem) * 2);
-  padding-right: calc(var(--spacing, .25rem) * 4);
-  grid-template: "label input-1 input-2" 2rem
-  / 8fr 10fr 10fr;
-}
-
-._one-icon-one-input_yadvv_51 {
-  column-gap: calc(var(--spacing, .25rem) * 2);
-  padding-right: calc(var(--spacing, .25rem) * 4);
-  grid-template: ". label"
-                 "icon input" minmax(2rem, auto)
-                 / 1.5rem 1fr;
-}
-
-._one-input-one-icon_yadvv_59 {
-  column-gap: calc(var(--spacing, .25rem) * 2);
-  grid-template: "label label"
-                 "input icon" minmax(2rem, auto)
-                 / 1fr 1.5rem;
-}
-
-._one-input-two-icon_yadvv_66 {
-  grid-template: "label . . . ."
-                 "input . icon-1 . icon-2" minmax(2rem, auto)
-                 / 1fr .5rem 1.5rem .25rem 1.5rem;
-}
-
-._two-input-two-icon_yadvv_72 {
-  grid-template: "label-1 label-1 label-2 label-2 . . ."
-                 "input-1 . input-2 . icon-1 . icon-2" minmax(2rem, auto)
-                 / minmax(76px, 1fr) .5rem 1fr .5rem 1.5rem .25rem 1.5rem;
-}
-
-._two-input-one-icon_yadvv_78 {
-  column-gap: calc(var(--spacing, .25rem) * 2);
-  grid-template: "label-1 label-2 label-2"
-                 "input-1 input-2 icon" minmax(2rem, auto)
-                 / 1fr 1fr 1.5rem;
-}
-
-._one-icon-one-input-one-icon_yadvv_85 {
-  grid-template: "label label label label label"
-                 "icon-1 . input . icon-2" minmax(2rem, auto)
-                 / 1.5rem .5rem 1fr .5rem 1.5rem;
-}
-
-._one-icon-one-input-two-icon_yadvv_91 {
-  grid-template: "label label label label label label label"
-                 "icon-1 . input . icon-2 . icon-3" minmax(2rem, auto)
-                 / 1.5rem .5rem 1fr .5rem 1.5rem .25rem 1.5rem;
-}
-
-._two-input-one-icon-double-row_yadvv_97 {
-  column-gap: calc(var(--spacing, .25rem) * 2);
-  grid-template: "label-1 label-2 ."
-                 "input-1 input-3 icon-1" 2rem
-                 "input-2 input-3 icon-2" 2rem
-                 / 1fr 1fr 1.5rem;
-}

package/dist/components/panel/src/styles/style.module.css.js

@@ -1,23 +0,0 @@
-import './style.module.css';const label = "_label_yadvv_2";
-const single = "_single_yadvv_14";
-const s = {
-  label,
-  single,
-  "two-columns": "_two-columns_yadvv_22",
-  "one-label-one-input": "_one-label-one-input_yadvv_30",
-  "one-label-one-input-one-icon": "_one-label-one-input-one-icon_yadvv_37",
-  "one-label-two-input": "_one-label-two-input_yadvv_44",
-  "one-icon-one-input": "_one-icon-one-input_yadvv_51",
-  "one-input-one-icon": "_one-input-one-icon_yadvv_59",
-  "one-input-two-icon": "_one-input-two-icon_yadvv_66",
-  "two-input-two-icon": "_two-input-two-icon_yadvv_72",
-  "two-input-one-icon": "_two-input-one-icon_yadvv_78",
-  "one-icon-one-input-one-icon": "_one-icon-one-input-one-icon_yadvv_85",
-  "one-icon-one-input-two-icon": "_one-icon-one-input-two-icon_yadvv_91",
-  "two-input-one-icon-double-row": "_two-input-one-icon-double-row_yadvv_97"
-};
-export {
-  s as default,
-  label,
-  single
-};

package/dist/components/skeleton/src/styles/style.module.css

@@ -1,18 +0,0 @@
-._skeleton_76sc4_1 {
-  transition: all 0.2s ease-in-out !important;
-  outline: none !important;
-  box-shadow: none !important;
-  border-color: transparent !important;
-  border-radius: var(--radius-md);
-  background-color: var(--color-secondary-background) !important;
-  resize: none !important;
-  pointer-events: none !important;
-  color: transparent !important;
-  &::placeholder,
-  &:placeholder-shown {
-    color: transparent !important;
-  }
-  & * {
-    visibility: hidden !important;
-  }
-}

package/dist/components/skeleton/src/styles/style.module.css.js

@@ -1,8 +0,0 @@
-import './style.module.css';const skeleton = "_skeleton_76sc4_1";
-const s = {
-  skeleton
-};
-export {
-  s as default,
-  skeleton
-};

package/dist/components/text-field/src/styles/style.module.css

@@ -1,31 +0,0 @@
-/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */
-@layer properties {
-  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-    *, :before, :after, ::backdrop {
-      --tw-border-style: solid;
-    }
-  }
-}
-
-._textField_u6mdl_10 {
-  grid-template-columns: auto 1fr auto;
-  grid-template-areas: "prefix input suffix";
-}
-
-._textField_u6mdl_10:before {
-  pointer-events: none;
-  z-index: 2;
-  border-style: var(--tw-border-style);
-  height: 100%;
-  transform-style: preserve-3d;
-  border-radius: inherit;
-  content: "";
-  border-width: 1px;
-  grid-area: 1 / 1 / 2 / 4;
-}
-
-@property --tw-border-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}

package/dist/components/text-field/src/styles/style.module.css.js

@@ -1,8 +0,0 @@
-import './style.module.css';const textField = "_textField_u6mdl_10";
-const s = {
-  textField
-};
-export {
-  s as default,
-  textField
-};

package/dist/components/virtual-select/dist/index.d.ts

@@ -1,48 +0,0 @@
-import { MenuContextContent, MenuDivider, MenuEmpty, MenuContextItem, MenuSearch, MenuTrigger, MenuValue } from '../../menus/src';
-import { FloatingFocusManagerProps } from '@floating-ui/react';
-import { default as React } from 'react';
-interface VirtualSelectOption<T = unknown> {
-    value: string;
-    label: string;
-    disabled?: boolean;
-    data?: T;
-}
-interface VirtualSelectProps<T = unknown> {
-    className?: string;
-    closeOnEscape?: boolean;
-    disabled?: boolean;
-    emptyText?: string;
-    focusManagerProps?: Partial<FloatingFocusManagerProps>;
-    matchTriggerWidth?: boolean;
-    maxHeight?: number;
-    onChange?: (value: string) => void;
-    onOpenChange?: (open: boolean) => void;
-    open?: boolean;
-    options: VirtualSelectOption<T>[];
-    overscan?: number;
-    placeholder?: string;
-    placement?: "bottom-start" | "bottom-end";
-    portalId?: string;
-    readOnly?: boolean;
-    renderOption?: (option: VirtualSelectOption<T>, isSelected: boolean) => React.ReactNode;
-    renderValue?: (option: VirtualSelectOption<T> | null) => React.ReactNode;
-    root?: HTMLElement | null;
-    searchPlaceholder?: string;
-    size?: "default" | "large";
-    value?: string | null;
-    variant?: "default" | "light" | "reset";
-}
-interface VirtualSelectComponentType {
-    <T = unknown>(props: VirtualSelectProps<T>): React.ReactElement | null;
-    displayName?: string;
-    Content: typeof MenuContextContent;
-    Divider: typeof MenuDivider;
-    Empty: typeof MenuEmpty;
-    Item: typeof MenuContextItem;
-    Search: typeof MenuSearch;
-    Trigger: typeof MenuTrigger;
-    Value: typeof MenuValue;
-}
-declare const VirtualSelect: VirtualSelectComponentType;
-
-export { VirtualSelect, type VirtualSelectOption, type VirtualSelectProps };