@plexui/ui 0.6.0 → 0.7.0

package/README.md

@@ -1,6 +1,6 @@
 # @plexui/ui
 
-A modern React component library built on the same design foundations as OpenAI's ChatGPT UI. 35 production-ready components, 14 hooks, a three-layer design token system, and a unified 9-step size scale — all powered by Radix primitives and Tailwind CSS 4.
+A modern React component library with 35 production-ready components, 14 hooks, a three-layer design token system, and a unified 9-step size scale — all powered by Radix primitives and Tailwind CSS 4.
 
 [Documentation](https://plexui.com) • [GitHub](https://github.com/plex-ui/docs) • [Figma Kit](https://plexui.com/#pricing)
 
@@ -10,7 +10,7 @@ A modern React component library built on the same design foundations as OpenAI'
 
 ## Highlights
 
-- **Battle-tested at ChatGPT scale** — components validated in a product used by hundreds of millions.
+- **Production-grade** — components designed and tested for real products at scale.
 - **9-step size scale** — all key controls (Button, Input, Select, SegmentedControl, etc.) share a unified `ControlSize` scale from `3xs` (22 px) to `3xl` (48 px). Most competitors offer only 3–4.
 - **Three-layer design tokens** — primitive → semantic → component CSS custom properties with `light-dark()` theming, alpha transparency scale, and 4-level elevation system.
 - **Radix + Tailwind 4** — accessible primitives under the hood, utility-first styling on top.

package/dist/es/components/CodeBlock/CodeBlock.module.css

@@ -5,18 +5,31 @@
   background-color: var(--codeblock-background-color);
 }.CopyButtonContainer {
   position: absolute;
-  top: 0;
-  right: 0;
-  padding: 12px 8px 0 0;
-  border-radius: inherit;
-  color: #24292e;
+  top: 8px;
+  right: 8px;
+  box-sizing: border-box;
+  display: grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  background-color: var(--color-surface-elevated-secondary);
+  color: var(--color-text-secondary);
 }/* Force the CopyButton to inherit the container's color on all states.
    Ghost hover background (::before) is preserved — it's the correct behavior. */.CopyButtonContainer button {
   color: inherit !important;
-}@media (prefers-color-scheme: dark) {
-  .CopyButtonContainer {
-    color: #d0d0d0;
-  }
+  padding: 0 !important;
+  -webkit-tap-highlight-color: transparent;
+}.CopyButtonContainer button::before {
+  opacity: 0 !important;
+  transform: none !important;
+  background-color: transparent !important;
+  box-shadow: none !important;
+}.CopyButtonContainer button:focus,
+.CopyButtonContainer button:focus-visible {
+  outline: none !important;
+}.CopyButtonContainer button:focus-visible::after {
+  outline: none !important;
 }.SyntaxHighlighter {
   --syntax1: var(--codeblock-syntax-1);
   --syntax2: var(--codeblock-syntax-2);
@@ -35,7 +48,7 @@
   /* 14px to a 16px baseline */
   font-weight: var(--font-weight-normal);
   line-height: 1.714em;
-  /* 24px at 14px — matches OpenAI reference */
+  /* 24px at 14px */
 
   /* stylelint-disable selector-class-pattern */
 
@@ -115,4 +128,4 @@
   align-items: center;
   justify-content: center;
 }
-}
+}

package/dist/es/components/Sidebar/Sidebar.module.css

@@ -1,6 +1,5 @@
 @layer components {/* =============================================
    Sidebar Component Styles
-   Based on OpenAI Platform styling
 ============================================= *//* Layout container (wraps sidebar + content) */.SidebarLayout {
   display: flex;
   width: 100%;

package/dist/es/components/Switch/Switch.js

@@ -4,9 +4,10 @@ import clsx from "clsx";
 import { Switch as RadixSwitch } from "radix-ui";
 import { useId } from "react";
 import s from "./Switch.module.css";
-export const Switch = ({ className, label, id: propsId, disabled, labelPosition = "end", ...restProps }) => {
+export const Switch = ({ className, label, description, id: propsId, disabled, labelPosition = "end", ...restProps }) => {
     const reactId = useId();
     const id = propsId ?? reactId;
-    return (_jsxs("div", { className: clsx(s.Container, className), "data-disabled": disabled ? "" : undefined, "data-has-label": label ? "" : undefined, "data-label-position": labelPosition, children: [_jsx(RadixSwitch.Root, { id: id, className: s.Track, disabled: disabled, ...restProps, children: _jsx(RadixSwitch.Thumb, { className: s.Thumb }) }), label && (_jsx("label", { htmlFor: id, className: s.Label, children: label }))] }));
+    const descriptionId = description ? `${id}-description` : undefined;
+    return (_jsxs("div", { className: clsx(s.Container, className), "data-disabled": disabled ? "" : undefined, "data-has-label": label ? "" : undefined, "data-label-position": labelPosition, children: [_jsx(RadixSwitch.Root, { id: id, className: s.Track, disabled: disabled, "aria-describedby": descriptionId, ...restProps, children: _jsx(RadixSwitch.Thumb, { className: s.Thumb }) }), label && (description ? (_jsxs("div", { className: s.LabelGroup, children: [_jsx("label", { htmlFor: id, className: s.Label, children: label }), _jsx("span", { id: descriptionId, className: s.Description, children: description })] })) : (_jsx("label", { htmlFor: id, className: s.Label, children: label })))] }));
 };
 //# sourceMappingURL=Switch.js.map

package/dist/es/components/Switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,UAAU,CAAA;AAChD,OAAO,EAA0C,KAAK,EAAE,MAAM,OAAO,CAAA;AACrE,OAAO,CAAC,MAAM,qBAAqB,CAAA;AAkCnC,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EACrB,SAAS,EACT,KAAK,EACL,EAAE,EAAE,OAAO,EACX,QAAQ,EACR,aAAa,GAAG,KAAK,EACrB,GAAG,SAAS,EACA,EAAE,EAAE;IAChB,MAAM,OAAO,GAAG,KAAK,EAAE,CAAA;IACvB,MAAM,EAAE,GAAG,OAAO,IAAI,OAAO,CAAA;IAE7B,OAAO,CACL,eACE,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,EAAE,SAAS,CAAC,mBACxB,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,oBACxB,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,yBACjB,aAAa,aAElC,KAAC,WAAW,CAAC,IAAI,IAAC,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,CAAC,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,KAAM,SAAS,YAC7E,KAAC,WAAW,CAAC,KAAK,IAAC,SAAS,EAAE,CAAC,CAAC,KAAK,GAAI,GACxB,EAElB,KAAK,IAAI,CACR,gBAAO,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,CAAC,CAAC,KAAK,YACnC,KAAK,GACA,CACT,IACG,CACP,CAAA;AACH,CAAC,CAAA","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { Switch as RadixSwitch } from \"radix-ui\"\nimport { type FocusEventHandler, type ReactNode, useId } from \"react\"\nimport s from \"./Switch.module.css\"\n\nexport type SwitchProps = {\n  /** The `id` of the switch. */\n  id?: string\n  /** The state of the switch when it is initially rendered. Use when you do not need to control its state. */\n  defaultChecked?: boolean\n  /** The controlled state of the switch. Must be used in conjunction with `onCheckedChange`. */\n  checked?: boolean\n  /** Optional accessible label rendered to the right of the checkbox. */\n  label?: ReactNode\n  /** Event handler called when the state of the switch changes. */\n  onCheckedChange?: (nextState: boolean) => void\n  /** Event handler called when the checkbox looses focus. */\n  onBlur?: FocusEventHandler<HTMLButtonElement>\n  /** Event handler called when the checkbox gains focus. */\n  onFocus?: FocusEventHandler<HTMLButtonElement>\n  /** When `true`, prevents the user from interacting with the switch. */\n  disabled?: boolean\n  /** When `true`, indicates that the user must check the switch before the owning form can be submitted. */\n  required?: boolean\n  /** The name of the switch. Submitted with its owning form as part of a name/value pair. */\n  name?: string\n  /** The value given as data when submitted with a `name`. */\n  value?: string\n  /** CSS classes applied to wrapper node */\n  className?: string\n  /**\n   * The position of the label relative to the switch.\n   * @default end\n   */\n  labelPosition?: \"start\" | \"end\"\n}\n\nexport const Switch = ({\n  className,\n  label,\n  id: propsId,\n  disabled,\n  labelPosition = \"end\",\n  ...restProps\n}: SwitchProps) => {\n  const reactId = useId()\n  const id = propsId ?? reactId\n\n  return (\n    <div\n      className={clsx(s.Container, className)}\n      data-disabled={disabled ? \"\" : undefined}\n      data-has-label={label ? \"\" : undefined}\n      data-label-position={labelPosition}\n    >\n      <RadixSwitch.Root id={id} className={s.Track} disabled={disabled} {...restProps}>\n        <RadixSwitch.Thumb className={s.Thumb} />\n      </RadixSwitch.Root>\n\n      {label && (\n        <label htmlFor={id} className={s.Label}>\n          {label}\n        </label>\n      )}\n    </div>\n  )\n}\n"]}
+{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,UAAU,CAAA;AAChD,OAAO,EAA0C,KAAK,EAAE,MAAM,OAAO,CAAA;AACrE,OAAO,CAAC,MAAM,qBAAqB,CAAA;AAoCnC,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EACrB,SAAS,EACT,KAAK,EACL,WAAW,EACX,EAAE,EAAE,OAAO,EACX,QAAQ,EACR,aAAa,GAAG,KAAK,EACrB,GAAG,SAAS,EACA,EAAE,EAAE;IAChB,MAAM,OAAO,GAAG,KAAK,EAAE,CAAA;IACvB,MAAM,EAAE,GAAG,OAAO,IAAI,OAAO,CAAA;IAC7B,MAAM,aAAa,GAAG,WAAW,CAAC,CAAC,CAAC,GAAG,EAAE,cAAc,CAAC,CAAC,CAAC,SAAS,CAAA;IAEnE,OAAO,CACL,eACE,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,EAAE,SAAS,CAAC,mBACxB,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,oBACxB,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,yBACjB,aAAa,aAElC,KAAC,WAAW,CAAC,IAAI,IACf,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,CAAC,CAAC,KAAK,EAClB,QAAQ,EAAE,QAAQ,sBACA,aAAa,KAC3B,SAAS,YAEb,KAAC,WAAW,CAAC,KAAK,IAAC,SAAS,EAAE,CAAC,CAAC,KAAK,GAAI,GACxB,EAElB,KAAK,IAAI,CACR,WAAW,CAAC,CAAC,CAAC,CACZ,eAAK,SAAS,EAAE,CAAC,CAAC,UAAU,aAC1B,gBAAO,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,CAAC,CAAC,KAAK,YACnC,KAAK,GACA,EACR,eAAM,EAAE,EAAE,aAAa,EAAE,SAAS,EAAE,CAAC,CAAC,WAAW,YAC9C,WAAW,GACP,IACH,CACP,CAAC,CAAC,CAAC,CACF,gBAAO,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,CAAC,CAAC,KAAK,YACnC,KAAK,GACA,CACT,CACF,IACG,CACP,CAAA;AACH,CAAC,CAAA","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { Switch as RadixSwitch } from \"radix-ui\"\nimport { type FocusEventHandler, type ReactNode, useId } from \"react\"\nimport s from \"./Switch.module.css\"\n\nexport type SwitchProps = {\n  /** The `id` of the switch. */\n  id?: string\n  /** The state of the switch when it is initially rendered. Use when you do not need to control its state. */\n  defaultChecked?: boolean\n  /** The controlled state of the switch. Must be used in conjunction with `onCheckedChange`. */\n  checked?: boolean\n  /** Optional accessible label rendered next to the switch. */\n  label?: ReactNode\n  /** Optional description rendered below the label. Linked via `aria-describedby`. */\n  description?: ReactNode\n  /** Event handler called when the state of the switch changes. */\n  onCheckedChange?: (nextState: boolean) => void\n  /** Event handler called when the checkbox looses focus. */\n  onBlur?: FocusEventHandler<HTMLButtonElement>\n  /** Event handler called when the checkbox gains focus. */\n  onFocus?: FocusEventHandler<HTMLButtonElement>\n  /** When `true`, prevents the user from interacting with the switch. */\n  disabled?: boolean\n  /** When `true`, indicates that the user must check the switch before the owning form can be submitted. */\n  required?: boolean\n  /** The name of the switch. Submitted with its owning form as part of a name/value pair. */\n  name?: string\n  /** The value given as data when submitted with a `name`. */\n  value?: string\n  /** CSS classes applied to wrapper node */\n  className?: string\n  /**\n   * The position of the label relative to the switch.\n   * @default end\n   */\n  labelPosition?: \"start\" | \"end\"\n}\n\nexport const Switch = ({\n  className,\n  label,\n  description,\n  id: propsId,\n  disabled,\n  labelPosition = \"end\",\n  ...restProps\n}: SwitchProps) => {\n  const reactId = useId()\n  const id = propsId ?? reactId\n  const descriptionId = description ? `${id}-description` : undefined\n\n  return (\n    <div\n      className={clsx(s.Container, className)}\n      data-disabled={disabled ? \"\" : undefined}\n      data-has-label={label ? \"\" : undefined}\n      data-label-position={labelPosition}\n    >\n      <RadixSwitch.Root\n        id={id}\n        className={s.Track}\n        disabled={disabled}\n        aria-describedby={descriptionId}\n        {...restProps}\n      >\n        <RadixSwitch.Thumb className={s.Thumb} />\n      </RadixSwitch.Root>\n\n      {label && (\n        description ? (\n          <div className={s.LabelGroup}>\n            <label htmlFor={id} className={s.Label}>\n              {label}\n            </label>\n            <span id={descriptionId} className={s.Description}>\n              {description}\n            </span>\n          </div>\n        ) : (\n          <label htmlFor={id} className={s.Label}>\n            {label}\n          </label>\n        )\n      )}\n    </div>\n  )\n}\n"]}

package/dist/es/components/Switch/Switch.module.css

@@ -75,20 +75,46 @@
   .Thumb[data-disabled] {
     background: var(--switch-thumb-color-disabled);
     box-shadow: none;
+  }.LabelGroup {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+  /* Use padding so that the spacing is intrinsic to the group, remaining clickable. */
+  [data-label-position="end"] .LabelGroup {
+    padding-left: var(--switch-label-gap);
+  }
+
+  [data-label-position="start"] .LabelGroup {
+    padding-right: var(--switch-label-gap);
+  }
+
+  [data-disabled] .LabelGroup {
+    cursor: not-allowed;
   }.Label {
   cursor: pointer;
 }
 
   /* Use padding so that the spacing is intrinsic to the label, remaining clickable. */
-  [data-label-position="end"] .Label {
+  [data-label-position="end"] > .Label {
     padding-left: var(--switch-label-gap);
   }
 
-  [data-label-position="start"] .Label {
+  [data-label-position="start"] > .Label {
     padding-right: var(--switch-label-gap);
   }
 
   [data-disabled] .Label {
     cursor: not-allowed;
+  }.Description {
+  color: var(--color-text-secondary);
+  font-size: var(--font-text-xs-size);
+  line-height: var(--font-text-xs-line-height);
+  cursor: pointer;
+}
+
+  [data-disabled] .Description {
+    cursor: not-allowed;
   }
 }

package/dist/types/components/Switch/Switch.d.ts

@@ -6,8 +6,10 @@ export type SwitchProps = {
     defaultChecked?: boolean;
     /** The controlled state of the switch. Must be used in conjunction with `onCheckedChange`. */
     checked?: boolean;
-    /** Optional accessible label rendered to the right of the checkbox. */
+    /** Optional accessible label rendered next to the switch. */
     label?: ReactNode;
+    /** Optional description rendered below the label. Linked via `aria-describedby`. */
+    description?: ReactNode;
     /** Event handler called when the state of the switch changes. */
     onCheckedChange?: (nextState: boolean) => void;
     /** Event handler called when the checkbox looses focus. */
@@ -30,4 +32,4 @@ export type SwitchProps = {
      */
     labelPosition?: "start" | "end";
 };
-export declare const Switch: ({ className, label, id: propsId, disabled, labelPosition, ...restProps }: SwitchProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Switch: ({ className, label, description, id: propsId, disabled, labelPosition, ...restProps }: SwitchProps) => import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plexui/ui",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Modern design system for building high-quality applications",
   "type": "module",
   "license": "MIT",