@ekanos/ui 0.1.1 → 0.1.2

package/dist/switch.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { Switch as Switch$1 } from '@base-ui/react/switch';
+
+declare function Switch({ className, size, ...props }: Switch$1.Root.Props & {
+    size?: 'sm' | 'default';
+}): React.JSX.Element;
+
+export { Switch };

package/dist/switch.js

@@ -0,0 +1,44 @@
+'use client';
+
+// ../ui/src/shadcn/switch.tsx
+import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
+
+// ../ui/src/lib/utils/cn.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// ../ui/src/shadcn/switch.tsx
+import { jsx } from "react/jsx-runtime";
+function Switch({
+  className,
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    SwitchPrimitive.Root,
+    {
+      "data-slot": "switch",
+      "data-size": size,
+      className: cn(
+        "peer group/switch focus-visible:border-ring focus-visible:ring-ring/50 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] data-disabled:cursor-not-allowed data-disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        SwitchPrimitive.Thumb,
+        {
+          "data-slot": "switch-thumb",
+          className: cn(
+            "bg-background dark:data-checked:bg-primary-foreground dark:data-unchecked:bg-foreground pointer-events-none block rounded-full ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-checked:translate-x-[calc(100%-2px)] data-unchecked:translate-x-0"
+          )
+        }
+      )
+    }
+  );
+}
+export {
+  Switch
+};

package/dist/textarea.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+
+declare function Textarea({ className, ...props }: React.ComponentProps<'textarea'>): React.JSX.Element;
+
+export { Textarea };

package/dist/textarea.js

@@ -0,0 +1,25 @@
+// ../ui/src/lib/utils/cn.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// ../ui/src/shadcn/textarea.tsx
+import { jsx } from "react/jsx-runtime";
+function Textarea({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      "data-slot": "textarea",
+      className: cn(
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:ring-destructive/40 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      ),
+      ...props
+    }
+  );
+}
+export {
+  Textarea
+};

package/dist/theme.css

@@ -0,0 +1,221 @@
+/*
+ * @ekanos/ui — Tailwind CSS v4 preset
+ * ------------------------------------------------------------------
+ * For partners who run their OWN Tailwind v4 build. Two lines in your entry
+ * stylesheet:
+ *
+ *     @import 'tailwindcss';
+ *     @import '@ekanos/ui/theme.css';
+ *
+ * That gives you the token values, the base rules, the `dark:` variant, and
+ * an `@source` so Tailwind generates the utilities this package's components
+ * emit. Do NOT also import `@ekanos/ui/styles.css` — that one is the
+ * pre-compiled build for projects with no Tailwind, and loading both means
+ * two copies of every utility.
+ *
+ * The token map below is the OPEN preset: it maps the FULL Fusion semantic
+ * surface — surfaces, brand, status, chart, sidebar, assistant, info, the full
+ * elevation scale, radius, fonts and the motion keyframes — not merely the
+ * subset `@ekanos/ui`'s own components happen to emit. That is deliberate: a
+ * partner writing their own Fusion-styled widget (what `ekanos dev` scaffolds)
+ * reaches Fusion's tokens ONLY through this file, so an ordinary `bg-chart-1`,
+ * `text-info`, `bg-sidebar` or `shadow-widget` in their code must resolve.
+ * Tailwind prunes every entry a build does not actually use, so a partner pays
+ * for only what they reference. See tokens.css for the value definitions and
+ * why the compiled `styles.css` (the closed artifact) stays narrower than this.
+ */
+
+@import './tokens.css' layer(base);
+@import './base.css' layer(base);
+
+/*
+ * Tell Tailwind where this package's class strings live, so a partner does not
+ * have to add an `@source` for node_modules by hand. Relative to this file:
+ * in the published package this file sits in `dist/` next to the bundles.
+ */
+@source './*.js';
+
+/*
+ * Dark mode, three states — matched declaration-for-declaration by the token
+ * blocks in tokens.css so `dark:` utilities and token values always flip
+ * together:
+ *
+ *   1. system preference, unless the page explicitly opted into light
+ *   2. an explicit `.dark` / `[data-theme='dark']` ancestor, which wins in
+ *      both directions
+ *
+ * Fusion itself is class-only (`@variant dark (&:where(.dark, .dark *))`); the
+ * media query is added here because a partner app may have no theme toggle at
+ * all and should still get a correct dark render.
+ */
+@custom-variant dark {
+  @media (prefers-color-scheme: dark) {
+    &:where(
+      :not(.light, .light *, [data-theme='light'], [data-theme='light'] *)
+    ) {
+      @slot;
+    }
+  }
+
+  &:where(.dark, .dark *, [data-theme='dark'], [data-theme='dark'] *) {
+    @slot;
+  }
+}
+
+@theme {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary-strong: var(--primary-strong);
+
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-destructive-strong: var(--destructive-strong);
+
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-success-strong: var(--success-strong);
+
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+
+  --color-sidebar: var(--sidebar-background);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  --color-assistant: var(--assistant);
+  --color-assistant-foreground: var(--assistant-foreground);
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+
+  --font-sans: var(--font-sans);
+  --font-heading: var(--font-heading);
+
+  /* Elevation shadow utilities — the full Fusion scale. `@ekanos/ui`'s own
+     components only reach `shadow-card`, but a partner widget commonly uses
+     `shadow-widget` (and the deeper levels for popovers/modals/overlays), so
+     the whole scale is exposed. Tailwind prunes any a build does not use. */
+  --shadow-flat: var(--el-flat);
+  --shadow-sunken: var(--el-sunken);
+  --shadow-inset: var(--el-inset);
+  --shadow-card: var(--el-card);
+  --shadow-widget: var(--el-widget);
+  --shadow-rail: var(--el-rail);
+  --shadow-popover: var(--el-popover);
+  --shadow-sticky: var(--el-sticky);
+  --shadow-modal: var(--el-modal);
+  --shadow-overlay: var(--el-overlay);
+
+  /* Motion — the Fusion keyframe utilities a partner widget may reach for
+     (entrance, fades, accordion). Pruned when unused. */
+  --animate-widget-enter: widget-enter 0.5s cubic-bezier(0.16, 1, 0.3, 1)
+    backwards;
+  --animate-fade-in: fade-in 0.4s ease-out backwards;
+  --animate-fade-up: fade-up 0.5s;
+  --animate-fade-down: fade-down 0.5s;
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+
+  @keyframes widget-enter {
+    from {
+      opacity: 0;
+      transform: translateY(12px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes fade-up {
+    0% {
+      opacity: 0;
+      transform: translateY(10px);
+    }
+    80% {
+      opacity: 0.6;
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes fade-down {
+    0% {
+      opacity: 0;
+      transform: translateY(-10px);
+    }
+    80% {
+      opacity: 0.6;
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes accordion-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--accordion-panel-height);
+    }
+  }
+
+  @keyframes accordion-up {
+    from {
+      height: var(--accordion-panel-height);
+    }
+    to {
+      height: 0;
+    }
+  }
+}