@openui-xio/stage-ui 0.0.2

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@openui-xio/stage-ui",
+  "type": "module",
+  "private": false,
+  "peerDependencies": {
+    "react": "19.1.2",
+    "react-dom": "19.1.2"
+  },
+  "dependencies": {
+    "@base-ui-components/react": "1.0.0-beta.2",
+    "@hookform/resolvers": "^5.2.1",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "input-otp": "^1.4.2",
+    "lucide-react": "^0.523.0",
+    "tailwind-merge": "^3.2.0",
+    "tw-animate-css": "^1.3.5"
+  },
+  "devDependencies": {
+    "@storybook/addon-docs": "^9.1.3",
+    "@storybook/addon-onboarding": "9.1.3",
+    "@storybook/react-vite": "^9.1.3",
+    "@tailwindcss/postcss": "^4.1.5",
+    "@tailwindcss/vite": "^4.1.12",
+    "@turbo/gen": "^2.5.3",
+    "@types/node": "22.15.2",
+    "@types/react": "^19.1.3",
+    "@types/react-dom": "^19.1.3",
+    "esbuild": "^0.24.2",
+    "glob": "^11.0.0",
+    "postcss": "^8.5.6",
+    "postcss-cli": "^11.0.1",
+    "react": "19.1.2",
+    "react-dom": "19.1.2",
+    "storybook": "^9.1.3",
+    "tailwindcss": "^4.1.5",
+    "tsx": "^4.19.2",
+    "typescript": "^5.8.3",
+    "vite": "^7.1.3",
+    "@openui-xio/typescript-config": "0.0.1"
+  },
+  "main": "./dist/components/index.js",
+  "types": "./dist/components/index.d.ts",
+  "exports": {
+    "./style.css": "./src/style.css",
+    "./postcss.config": "./postcss.config.mjs",
+    "./lib/*": "./src/lib/*.ts",
+    "./components/*": "./src/components/*.tsx",
+    "./hooks/*": "./src/hooks/*.ts"
+  },
+  "version": "0.0.2",
+  "scripts": {
+    "lint": "biome lint . --max-warnings 0",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  }
+}

package/postcss.config.cjs

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+};

package/postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+};

package/src/components/accordion.tsx

@@ -0,0 +1,56 @@
+import { cn } from '../lib/utils.js';
+import { Accordion as BaseAccordion } from '@base-ui-components/react/accordion';
+import { ChevronDownIcon } from 'lucide-react';
+import type { ReactNode } from 'react';
+
+export type AccordionProps = React.ComponentProps<typeof BaseAccordion.Root> & {
+  variant?: 'clear' | 'glass';
+};
+
+export function Accordion({ variant = 'glass', ...props }: AccordionProps) {
+  return (
+    <BaseAccordion.Root
+      {...props}
+      className={cn(
+        variant === 'glass' ? 'glass-body overflow-hidden rounded-xl' : '',
+        props.className,
+      )}
+    />
+  );
+}
+
+export type AccordionItemProps = React.ComponentProps<
+  typeof BaseAccordion.Item
+> & {
+  title: ReactNode;
+  icon?: ReactNode;
+  children?: ReactNode;
+};
+
+export function AccordionItem({
+  title,
+  icon,
+  children,
+  ...props
+}: AccordionItemProps) {
+  return (
+    <BaseAccordion.Item
+      {...props}
+      className={cn(
+        'border-zinc-500/10 border-b shadow-none hover:bg-zinc-500/5',
+        props.className,
+      )}
+    >
+      <BaseAccordion.Header>
+        <BaseAccordion.Trigger className="group flex w-full flex-row items-center justify-between gap-4 bg-zinc-50/10 px-3 py-2 transition-colors duration-150 ease-out hover:bg-white/20">
+          {icon && <div className="size-5">{icon}</div>}
+          <div className="block flex-1 text-start font-medium">{title}</div>
+          <ChevronDownIcon className="size-4 origin-center rotate-0 opacity-40 transition-transform duration-150 ease-out group-hover:opacity-60 group-data-[panel-open]:rotate-180" />
+        </BaseAccordion.Trigger>
+      </BaseAccordion.Header>
+      <BaseAccordion.Panel className="h-[var(--accordion-panel-height)] px-3 pt-1.5 pb-3 transition-[height] duration-150 ease-out data-[ending-style]:h-0 data-[starting-style]:h-0">
+        {children}
+      </BaseAccordion.Panel>
+    </BaseAccordion.Item>
+  );
+}

package/src/components/button.tsx

@@ -0,0 +1,41 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../lib/utils.js';
+
+export const buttonVariants = cva(
+  'relative flex flex-row items-center justify-center gap-2 font-normal disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        primary:
+          'glass-body glass-body-interactive glass-body-motion glass-body-motion-interactive bg-primary text-primary-foreground',
+        secondary:
+          'glass-body glass-body-interactive glass-body-motion glass-body-motion-interactive text-foreground',
+        ghost: 'bg-transparent font-medium text-foreground hover:bg-zinc-500/5',
+      },
+      size: {
+        sm: 'h-8 rounded-xl px-2 py-1 text-sm',
+        md: 'h-10 rounded-xl px-4 py-2 text-sm',
+        lg: 'h-12 rounded-xl px-6 py-3 text-base',
+        xl: 'h-14 rounded-xl px-8 py-4 text-lg',
+        'icon-sm': 'size-8 rounded-full',
+        'icon-md': 'size-10 rounded-full',
+      },
+    },
+  },
+);
+
+export type ButtonProps = React.HTMLAttributes<HTMLButtonElement> &
+  VariantProps<typeof buttonVariants>;
+
+export function Button({
+  variant = 'primary',
+  size = 'md',
+  ...props
+}: ButtonProps) {
+  return (
+    <button
+      {...props}
+      className={cn(buttonVariants({ variant, size }), props.className)}
+    />
+  );
+}

package/src/components/checkbox.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { Checkbox as BaseCheckbox } from '@base-ui-components/react/checkbox';
+import { CheckIcon } from 'lucide-react';
+import { cn } from '../lib/utils.js';
+
+export function Checkbox(
+  props: React.ComponentProps<typeof BaseCheckbox.Root>,
+) {
+  return (
+    <BaseCheckbox.Root
+      {...props}
+      className={cn(
+        'glass-inset relative flex size-6 rounded-md p-1 transition-[background-position,box-shadow,background-color] duration-[150ms] ease-[cubic-bezier(0.26,0.75,0.38,0.45)] disabled:pointer-events-none disabled:opacity-50 data-[checked]:bg-blue-600',
+        props.className,
+      )}
+    >
+      <BaseCheckbox.Indicator>
+        <CheckIcon className="h-4 w-4 stroke-3 text-white" />
+      </BaseCheckbox.Indicator>
+    </BaseCheckbox.Root>
+  );
+}

package/src/components/field.tsx

@@ -0,0 +1,13 @@
+import { Field as FieldBase } from '@base-ui-components/react/field';
+
+export const Field = FieldBase.Root;
+
+export const FieldLabel = FieldBase.Label;
+
+export const FieldControl = FieldBase.Control;
+
+export const FieldDescription = FieldBase.Description;
+
+export const FieldError = FieldBase.Error;
+
+export const FieldValidity = FieldBase.Validity;

package/src/components/index.ts

@@ -0,0 +1,21 @@
+// Export all components
+export { Button, type ButtonProps } from './button.js';
+export { Switch } from './switch.js';
+export { Checkbox } from './checkbox.js';
+export {
+  Accordion,
+  AccordionItem,
+  type AccordionProps,
+  type AccordionItemProps,
+} from './accordion.js';
+export {
+  Field,
+  FieldLabel,
+  FieldControl,
+  FieldDescription,
+  FieldError,
+  FieldValidity,
+} from './field.js';
+
+// Re-export utilities
+export { cn } from '../lib/utils.js';

package/src/components/menu.tsx

@@ -0,0 +1,133 @@
+import { Menu as MenuBase } from '@base-ui-components/react/menu';
+import type { ComponentProps, ReactElement } from 'react';
+import { cn } from '../lib/utils.js';
+import { ChevronRightIcon } from 'lucide-react';
+
+export const Menu = MenuBase.Root;
+
+export type MenuTriggerProps = Omit<
+  ComponentProps<typeof MenuBase.Trigger>,
+  'render' | 'className'
+> & {
+  children: React.ReactElement;
+};
+export function MenuTrigger({ children, ...props }: MenuTriggerProps) {
+  return (
+    <MenuBase.Trigger
+      {...props}
+      /* We do this because it works just fine but for some reason the types bitch around... */
+      render={children as unknown as () => ReactElement}
+    />
+  );
+}
+
+export type MenuContentProps = Omit<
+  ComponentProps<typeof MenuBase.Positioner> &
+    ComponentProps<typeof MenuBase.Popup>,
+  'render'
+> & {
+  children: React.ReactNode;
+};
+export function MenuContent({
+  align = 'center',
+  alignOffset,
+  side,
+  sideOffset = 8,
+  sticky,
+  className,
+  children,
+  ...props
+}: MenuContentProps) {
+  return (
+    <MenuBase.Portal>
+      <MenuBase.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+        sticky={sticky}
+      >
+        <MenuBase.Popup
+          {...props}
+          className={cn(
+            'glass-body glass-body-motion origin-[var(--transform-origin)] rounded-lg bg-white/60 p-1 shadow-lg backdrop-blur-xs transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[starting-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:bg-black/60',
+            className,
+          )}
+        >
+          {children}
+        </MenuBase.Popup>
+      </MenuBase.Positioner>
+    </MenuBase.Portal>
+  );
+}
+
+export type MenuItemProps = ComponentProps<typeof MenuBase.Item>;
+export function MenuItem({ children, className, ...props }: MenuItemProps) {
+  return (
+    <MenuBase.Item
+      {...props}
+      className={cn(
+        'flex w-full min-w-24 cursor-default flex-row items-center justify-start gap-2 rounded-md py-1.5 pr-6 pl-2 text-sm transition-all duration-150 ease-out hover:bg-black/5 hover:pl-2.25 dark:hover:bg-white/5',
+        className,
+      )}
+    >
+      {children}
+    </MenuBase.Item>
+  );
+}
+
+export const MenuSeparator = MenuBase.Separator;
+export const MenuGroup = MenuBase.Group;
+export const MenuGroupLabel = MenuBase.GroupLabel;
+export const MenuRadioGroup = MenuBase.RadioGroup;
+export const MenuRadioItem = MenuBase.RadioItem;
+export const MenuCheckboxItem = MenuBase.CheckboxItem;
+export const MenuSubmenu = MenuBase.SubmenuRoot;
+
+export type MenuSubmenuTriggerProps = ComponentProps<
+  typeof MenuBase.SubmenuTrigger
+>;
+export function MenuSubmenuTrigger({
+  children,
+  className,
+  ...props
+}: MenuSubmenuTriggerProps) {
+  return (
+    <MenuBase.SubmenuTrigger
+      {...props}
+      className={cn(
+        'group flex w-full min-w-24 cursor-default flex-row items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm transition-all duration-150 ease-out hover:bg-black/5 hover:pl-2.25 dark:hover:bg-white/5',
+        className,
+      )}
+    >
+      {children}
+      <ChevronRightIcon className="ml-2 size-3 opacity-50 group-hover:opacity-100" />
+    </MenuBase.SubmenuTrigger>
+  );
+}
+
+export type MenuSubmenuContentProps = MenuContentProps;
+export function MenuSubmenuContent({
+  align = 'center',
+  alignOffset,
+  side,
+  sideOffset = 0,
+  sticky,
+  className,
+  children,
+  ...props
+}: MenuSubmenuContentProps) {
+  return (
+    <MenuContent
+      {...props}
+      align={align}
+      alignOffset={alignOffset}
+      side={side}
+      sideOffset={sideOffset}
+      sticky={sticky}
+      className={className}
+    >
+      {children}
+    </MenuContent>
+  );
+}

package/src/components/switch.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { Switch as BaseSwitch } from '@base-ui-components/react/switch';
+import { cn } from '../lib/utils.js';
+
+export function Switch(props: React.ComponentProps<typeof BaseSwitch.Root>) {
+  return (
+    <BaseSwitch.Root
+      {...props}
+      className={cn(
+        'glass-inset relative flex h-6 w-10 rounded-full p-1 transition-[background-position,box-shadow,background-color] duration-[150ms] ease-[cubic-bezier(0.26,0.75,0.38,0.45)] disabled:pointer-events-none disabled:opacity-50 data-[checked]:bg-blue-600',
+        props.className,
+      )}
+    >
+      <BaseSwitch.Thumb className="glass-body glass-body-motion aspect-square h-full rounded-full bg-black/50 transition-transform duration-200 data-[checked]:translate-x-4 data-[checked]:bg-white/80" />
+    </BaseSwitch.Root>
+  );
+}

package/src/lib/shared-styles.ts

@@ -0,0 +1,5 @@
+export const glassOverlayBaseClassName = `
+z-0
+before:absolute before:content-normal before:size-full before:inset-0 before:border before:border-zinc-950/20 before:ring-inset before:ring-[1.5px] before:ring-white/30 before:backdrop-blur-sm before:-z-20 before:bg-white/85 before:rounded-[inherit]
+after:absolute after:pointer-events-none after:rounded-[inherit] after:block after:size-full after:inset-0 after:shadow-glass
+`;

package/src/lib/utils.ts

@@ -0,0 +1,7 @@
+import type { ClassValue } from 'class-variance-authority/types';
+import { twMerge } from 'tailwind-merge';
+import { clsx } from 'clsx';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/stories/Accordion.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { fn } from 'storybook/test';
+
+import { Accordion, AccordionItem } from '../components/accordion.js';
+import { CogIcon } from 'lucide-react';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: 'Example/Accordion',
+  component: () => (
+    <Accordion>
+      <AccordionItem title="item1" icon={<CogIcon className="size-5" />}>
+        This is content for Item 1.
+      </AccordionItem>
+      <AccordionItem title="item2">This is content for Item 2.</AccordionItem>
+      <AccordionItem title="item3">This is content for Item 3.</AccordionItem>
+    </Accordion>
+  ),
+  parameters: {},
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {
+    disabled: { control: 'boolean' },
+  },
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+  args: { onClick: fn() },
+} satisfies Meta<typeof Accordion>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Enabled: Story = {
+  args: {
+    defaultChecked: true,
+  },
+};

package/src/stories/Button.stories.ts

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { fn } from 'storybook/test';
+
+import { Button } from '../components/button.js';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: 'Example/Button',
+  component: Button,
+  parameters: {},
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {
+    variant: { control: 'select', options: ['primary', 'secondary', 'ghost'] },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg', 'xl', 'icon-sm', 'icon-md'],
+    },
+    disabled: { control: 'boolean' },
+    children: { control: 'text' },
+  },
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+  args: { onClick: fn() },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {
+  args: {
+    variant: 'primary',
+    size: 'md',
+    shape: 'default',
+    children: 'Test button',
+  },
+};

package/src/stories/Checkbox.stories.ts

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { fn } from 'storybook/test';
+
+import { Checkbox } from '../components/checkbox.js';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: 'Example/Checkbox',
+  component: Checkbox,
+  parameters: {},
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {
+    disabled: { control: 'boolean' },
+  },
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+  args: { onClick: fn() },
+} satisfies Meta<typeof Checkbox>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Enabled: Story = {
+  args: {
+    defaultChecked: true,
+  },
+};