@zylem/ui 0.1.0 → 0.2.0

package/src/components/Sidebar/Sidebar.css.ts

@@ -0,0 +1,79 @@
+import { globalStyle } from '@vanilla-extract/css';
+import { vars } from '../../theme.css';
+
+/** Owns the `.sidebar` / `.sidebar-item` classes (previously sidebar.css.ts). */
+globalStyle('.sidebar', {
+  boxSizing: 'border-box',
+  display: 'flex',
+  flexDirection: 'column',
+  minHeight: 0,
+  height: '100%',
+  overflowY: 'auto',
+  background: vars.material.glassPanelDark,
+  borderRight: '1px solid rgba(97, 166, 232, 0.28)',
+  backdropFilter: `blur(${vars.effects.blurSm}) saturate(1.1)`,
+  '@supports': {
+    'not (backdrop-filter: blur(1px))': {
+      background: vars.colors.surface,
+    },
+  },
+});
+
+globalStyle('.sidebar-section', {
+  display: 'flex',
+  flexDirection: 'column',
+  paddingBottom: vars.spacing.sm,
+});
+
+globalStyle('.sidebar-section-title', {
+  padding: `${vars.spacing.sm} ${vars.spacing.md} ${vars.spacing.xs}`,
+  fontSize: '10px',
+  fontWeight: 700,
+  letterSpacing: '0.12em',
+  textTransform: 'uppercase',
+  color: vars.colors.textSecondary,
+  fontFamily: vars.typography.fontFamily,
+  userSelect: 'none',
+});
+
+globalStyle('.sidebar-item', {
+  display: 'flex',
+  alignItems: 'center',
+  gap: vars.spacing.sm,
+  padding: `${vars.spacing.xs} ${vars.spacing.md}`,
+  margin: `0 ${vars.spacing.xs}`,
+  borderRadius: vars.radii.control,
+  border: '1px solid transparent',
+  color: vars.colors.text,
+  fontFamily: vars.typography.fontFamily,
+  fontSize: vars.typography.fontSize,
+  cursor: 'pointer',
+  userSelect: 'none',
+  textDecoration: 'none',
+  background: 'none',
+  textAlign: 'left',
+  transition: `background ${vars.motion.fast} ${vars.motion.easeOut}, border-color ${vars.motion.fast} ${vars.motion.easeOut}`,
+});
+
+globalStyle('.sidebar-item:hover', {
+  background: 'rgba(97, 166, 232, 0.12)',
+});
+
+globalStyle('.sidebar-item[data-active], .sidebar-item.is-active', {
+  background: vars.material.buttonGlass,
+  border: '1px solid rgba(150, 210, 255, 0.5)',
+  boxShadow: vars.effects.shadowButton,
+  color: '#F4FAFF',
+  fontWeight: 600,
+  textShadow: '0 1px 1px rgba(0,0,0,0.6)',
+});
+
+globalStyle('.sidebar-item:focus-visible', {
+  outline: 'none',
+  boxShadow: vars.effects.focusRing,
+});
+
+globalStyle('.sidebar-item[disabled], .sidebar-item[data-disabled]', {
+  opacity: 0.45,
+  cursor: 'not-allowed',
+});

package/src/components/Sidebar/Sidebar.tsx

@@ -0,0 +1,69 @@
+import { Show, splitProps } from 'solid-js';
+import type { JSX } from 'solid-js';
+
+export interface SidebarProps extends JSX.HTMLAttributes<HTMLElement> {
+  children?: JSX.Element;
+}
+
+/**
+ * HyperGlass sidebar: glass navigation rail. Compose with `SidebarSection`
+ * and `SidebarItem`.
+ */
+export function Sidebar(props: SidebarProps) {
+  const [local, rest] = splitProps(props, ['children', 'class']);
+  return (
+    <aside
+      class={local.class ? `sidebar zylem-scroll ${local.class}` : 'sidebar zylem-scroll'}
+      {...rest}
+    >
+      {local.children}
+    </aside>
+  );
+}
+
+export interface SidebarSectionProps {
+  title?: JSX.Element;
+  children?: JSX.Element;
+  class?: string;
+}
+
+export function SidebarSection(props: SidebarSectionProps) {
+  return (
+    <div
+      class={
+        props.class ? `sidebar-section ${props.class}` : 'sidebar-section'
+      }
+    >
+      <Show when={props.title}>
+        <div class="sidebar-section-title">{props.title}</div>
+      </Show>
+      {props.children}
+    </div>
+  );
+}
+
+export interface SidebarItemProps
+  extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
+  active?: boolean;
+  children?: JSX.Element;
+}
+
+export function SidebarItem(props: SidebarItemProps) {
+  const [local, rest] = splitProps(props, ['active', 'children', 'class']);
+  return (
+    <button
+      type="button"
+      class={local.class ? `sidebar-item ${local.class}` : 'sidebar-item'}
+      data-active={local.active ? '' : undefined}
+      {...rest}
+    >
+      {local.children}
+    </button>
+  );
+}
+
+Sidebar.Section = SidebarSection;
+Sidebar.Item = SidebarItem;
+
+/** Class hook for anchor-based sidebar items (router links). */
+export const sidebarItemClass = 'sidebar-item';

package/src/components/Slider/Slider.css.ts

@@ -0,0 +1,91 @@
+import { globalStyle } from '@vanilla-extract/css';
+import { vars } from '../../theme.css';
+
+globalStyle('.zylem-slider-root', {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: vars.spacing.xxs,
+  width: '100%',
+  userSelect: 'none',
+  touchAction: 'none',
+});
+
+globalStyle('.zylem-slider-root[data-disabled]', {
+  opacity: 0.5,
+});
+
+globalStyle('.zylem-slider-header', {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+});
+
+globalStyle('.zylem-slider-label', {
+  fontSize: '11px',
+  letterSpacing: '0.08em',
+  textTransform: 'uppercase',
+  color: vars.colors.textSecondary,
+  fontFamily: vars.typography.fontFamily,
+});
+
+globalStyle('.zylem-slider-value', {
+  fontSize: `calc(${vars.typography.fontSize} - 2px)`,
+  color: vars.colors.primary,
+  fontFamily: vars.typography.fontFamily,
+  fontVariantNumeric: 'tabular-nums',
+});
+
+globalStyle('.zylem-slider-track', {
+  position: 'relative',
+  height: '8px',
+  width: '100%',
+  borderRadius: '999px',
+  border: '1px solid rgba(97, 166, 232, 0.28)',
+  background: vars.material.fieldGlass,
+  boxShadow: vars.effects.shadowInset,
+  cursor: 'pointer',
+});
+
+globalStyle('.zylem-slider-fill', {
+  position: 'absolute',
+  height: '100%',
+  borderRadius: '999px',
+  background:
+    'linear-gradient(180deg, rgba(178, 219, 255, 0.65), rgba(48, 137, 220, 0.9))',
+  boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.45)',
+});
+
+globalStyle('.zylem-slider-thumb', {
+  display: 'block',
+  width: '16px',
+  height: '16px',
+  top: '-5px',
+  borderRadius: '999px',
+  border: '1px solid rgba(255,255,255,0.5)',
+  background:
+    'linear-gradient(180deg, rgba(240,250,255,0.96), rgba(140,190,235,0.92))',
+  boxShadow: `inset 0 1px 0 rgba(255,255,255,0.75), 0 1px 4px rgba(0,0,0,0.5), ${vars.effects.glowPrimary}`,
+  cursor: 'grab',
+  outline: 'none',
+  transition: `box-shadow ${vars.motion.fast} ${vars.motion.easeOut}`,
+});
+
+globalStyle('.zylem-slider-thumb:active', {
+  cursor: 'grabbing',
+});
+
+globalStyle('.zylem-slider-thumb:focus-visible', {
+  boxShadow: `inset 0 1px 0 rgba(255,255,255,0.75), ${vars.effects.focusRing}`,
+});
+
+globalStyle('.zylem-slider-thumb-input', {
+  position: 'absolute',
+  width: '1px',
+  height: '1px',
+  padding: 0,
+  margin: '-1px',
+  overflow: 'hidden',
+  clip: 'rect(0, 0, 0, 0)',
+  whiteSpace: 'nowrap',
+  border: 0,
+});

package/src/components/Slider/Slider.tsx

@@ -0,0 +1,51 @@
+import { Slider as KSlider } from '@kobalte/core';
+import { Show } from 'solid-js';
+
+export interface SliderProps {
+  label?: string;
+  value?: number;
+  onChange?: (value: number) => void;
+  minValue?: number;
+  maxValue?: number;
+  step?: number;
+  disabled?: boolean;
+  showValue?: boolean;
+  class?: string;
+}
+
+/**
+ * HyperGlass slider: inset glass track, blue glass fill, and a glowing
+ * glossy thumb.
+ */
+export function Slider(props: SliderProps) {
+  return (
+    <KSlider.Root
+      class={props.class ? `zylem-slider-root ${props.class}` : 'zylem-slider-root'}
+      value={props.value !== undefined ? [props.value] : undefined}
+      onChange={(values) => props.onChange?.(values[0])}
+      minValue={props.minValue}
+      maxValue={props.maxValue}
+      step={props.step}
+      disabled={props.disabled}
+    >
+      <Show when={props.label || props.showValue}>
+        <div class="zylem-slider-header">
+          <Show when={props.label}>
+            <KSlider.Label class="zylem-slider-label">
+              {props.label}
+            </KSlider.Label>
+          </Show>
+          <Show when={props.showValue}>
+            <KSlider.ValueLabel class="zylem-slider-value" />
+          </Show>
+        </div>
+      </Show>
+      <KSlider.Track class="zylem-slider-track">
+        <KSlider.Fill class="zylem-slider-fill" />
+        <KSlider.Thumb class="zylem-slider-thumb">
+          <KSlider.Input class="zylem-slider-thumb-input" />
+        </KSlider.Thumb>
+      </KSlider.Track>
+    </KSlider.Root>
+  );
+}

package/src/components/Switch/Switch.css.ts

@@ -0,0 +1,72 @@
+import { globalStyle } from '@vanilla-extract/css';
+import { vars } from '../../theme.css';
+
+globalStyle('.zylem-switch-root', {
+  display: 'inline-flex',
+  alignItems: 'center',
+  gap: vars.spacing.sm,
+  cursor: 'pointer',
+  userSelect: 'none',
+});
+
+globalStyle('.zylem-switch-root[data-disabled]', {
+  opacity: 0.5,
+  cursor: 'not-allowed',
+});
+
+globalStyle('.zylem-switch-input', {
+  position: 'absolute',
+  width: '1px',
+  height: '1px',
+  padding: 0,
+  margin: '-1px',
+  overflow: 'hidden',
+  clip: 'rect(0, 0, 0, 0)',
+  whiteSpace: 'nowrap',
+  border: 0,
+});
+
+globalStyle('.zylem-switch-control', {
+  boxSizing: 'border-box',
+  width: '38px',
+  height: '20px',
+  borderRadius: '999px',
+  border: '1px solid rgba(97, 166, 232, 0.42)',
+  background: vars.material.fieldGlass,
+  boxShadow: vars.effects.shadowInset,
+  padding: '2px',
+  display: 'flex',
+  alignItems: 'center',
+  transition: `background ${vars.motion.normal} ${vars.motion.easeOut}, box-shadow ${vars.motion.normal} ${vars.motion.easeOut}`,
+});
+
+globalStyle('.zylem-switch-root[data-checked] .zylem-switch-control', {
+  background:
+    'linear-gradient(180deg, rgba(178, 219, 255, 0.3), rgba(30, 94, 148, 0.85))',
+  boxShadow: `${vars.effects.shadowInset}, ${vars.effects.glowPrimary}`,
+});
+
+globalStyle('.zylem-switch-root:focus-within .zylem-switch-control', {
+  boxShadow: `${vars.effects.shadowInset}, ${vars.effects.focusRing}`,
+});
+
+globalStyle('.zylem-switch-thumb', {
+  width: '14px',
+  height: '14px',
+  borderRadius: '999px',
+  border: '1px solid rgba(255,255,255,0.4)',
+  background:
+    'linear-gradient(180deg, rgba(240,250,255,0.95), rgba(160,200,235,0.9))',
+  boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.7), 0 1px 3px rgba(0,0,0,0.5)',
+  transition: `transform ${vars.motion.normal} ${vars.motion.easeOut}`,
+});
+
+globalStyle('.zylem-switch-thumb[data-checked]', {
+  transform: 'translateX(18px)',
+});
+
+globalStyle('.zylem-switch-label', {
+  fontFamily: vars.typography.fontFamily,
+  fontSize: vars.typography.fontSize,
+  color: vars.colors.text,
+});

package/src/components/Switch/Switch.tsx

@@ -0,0 +1,36 @@
+import { Switch as KSwitch } from '@kobalte/core';
+import { Show } from 'solid-js';
+
+export interface SwitchProps {
+  label?: string;
+  checked?: boolean;
+  defaultChecked?: boolean;
+  onChange?: (checked: boolean) => void;
+  disabled?: boolean;
+  name?: string;
+  class?: string;
+}
+
+/**
+ * HyperGlass switch: glass pill track with a glossy sliding thumb.
+ */
+export function Switch(props: SwitchProps) {
+  return (
+    <KSwitch.Root
+      class={props.class ? `zylem-switch-root ${props.class}` : 'zylem-switch-root'}
+      checked={props.checked}
+      defaultChecked={props.defaultChecked}
+      onChange={props.onChange}
+      disabled={props.disabled}
+      name={props.name}
+    >
+      <KSwitch.Input class="zylem-switch-input" />
+      <KSwitch.Control class="zylem-switch-control">
+        <KSwitch.Thumb class="zylem-switch-thumb" />
+      </KSwitch.Control>
+      <Show when={props.label}>
+        <KSwitch.Label class="zylem-switch-label">{props.label}</KSwitch.Label>
+      </Show>
+    </KSwitch.Root>
+  );
+}

package/src/components/Tabs/Tabs.css.ts

@@ -0,0 +1,70 @@
+import { globalStyle } from '@vanilla-extract/css';
+import { vars } from '../../theme.css';
+
+globalStyle('.zylem-tabs-root', {
+  display: 'flex',
+  flexDirection: 'column',
+  minHeight: 0,
+  width: '100%',
+});
+
+// Stack-card tab list: tabs read as cards peeking out of a stack.
+globalStyle('.zylem-tabs-list', {
+  display: 'flex',
+  alignItems: 'flex-end',
+  gap: '3px',
+  position: 'relative',
+  padding: `${vars.spacing.xs} ${vars.spacing.xs} 0`,
+});
+
+globalStyle('.zylem-tabs-trigger', {
+  display: 'inline-flex',
+  alignItems: 'center',
+  gap: vars.spacing.xs,
+  padding: `${vars.spacing.xs} ${vars.spacing.md}`,
+  borderRadius: `${vars.radii.button} ${vars.radii.button} 0 0`,
+  border: '1px solid rgba(97, 166, 232, 0.3)',
+  borderBottom: 'none',
+  background:
+    'linear-gradient(180deg, rgba(26, 31, 39, 0.6), rgba(10, 20, 30, 0.5))',
+  color: vars.colors.textSecondary,
+  fontFamily: vars.typography.fontFamily,
+  fontSize: `calc(${vars.typography.fontSize} - 1px)`,
+  fontWeight: 600,
+  cursor: 'pointer',
+  outline: 'none',
+  transition: `background ${vars.motion.fast} ${vars.motion.easeOut}, color ${vars.motion.fast} ${vars.motion.easeOut}`,
+});
+
+globalStyle('.zylem-tabs-trigger:hover', {
+  color: vars.colors.text,
+  background:
+    'linear-gradient(180deg, rgba(38, 76, 112, 0.5), rgba(15, 39, 62, 0.45))',
+});
+
+globalStyle('.zylem-tabs-trigger[data-selected]', {
+  color: '#F4FAFF',
+  background: vars.material.buttonGlass,
+  borderColor: 'rgba(150, 210, 255, 0.55)',
+  boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.35)',
+  textShadow: '0 1px 1px rgba(0,0,0,0.6)',
+});
+
+globalStyle('.zylem-tabs-trigger:focus-visible', {
+  boxShadow: vars.effects.focusRing,
+});
+
+globalStyle('.zylem-tabs-trigger[data-disabled]', {
+  opacity: 0.45,
+  cursor: 'not-allowed',
+});
+
+globalStyle('.zylem-tabs-content', {
+  flex: 1,
+  minHeight: 0,
+  borderRadius: `0 ${vars.radii.card} ${vars.radii.card} ${vars.radii.card}`,
+  border: '1px solid rgba(97, 166, 232, 0.3)',
+  background: vars.material.glassPanelDark,
+  padding: vars.spacing.md,
+  outline: 'none',
+});

package/src/components/Tabs/Tabs.tsx

@@ -0,0 +1,79 @@
+import { Tabs as KTabs } from '@kobalte/core';
+import type { JSX } from 'solid-js';
+
+export interface TabsProps {
+  value?: string;
+  onChange?: (value: string) => void;
+  defaultValue?: string;
+  class?: string;
+  children: JSX.Element;
+  'aria-label'?: string;
+}
+
+/**
+ * HyperGlass tabs: stack-card style tab strip over a glass content panel.
+ * Compose with `Tabs.List`, `Tabs.Trigger`, and `Tabs.Content`.
+ */
+export function Tabs(props: TabsProps) {
+  return (
+    <KTabs.Root
+      class={props.class ? `zylem-tabs-root ${props.class}` : 'zylem-tabs-root'}
+      value={props.value}
+      onChange={props.onChange}
+      defaultValue={props.defaultValue}
+      aria-label={props['aria-label']}
+    >
+      {props.children}
+    </KTabs.Root>
+  );
+}
+
+export function TabsList(props: { children: JSX.Element; class?: string }) {
+  return (
+    <KTabs.List
+      class={props.class ? `zylem-tabs-list ${props.class}` : 'zylem-tabs-list'}
+    >
+      {props.children}
+    </KTabs.List>
+  );
+}
+
+export function TabsTrigger(props: {
+  value: string;
+  children: JSX.Element;
+  disabled?: boolean;
+  class?: string;
+}) {
+  return (
+    <KTabs.Trigger
+      class={
+        props.class ? `zylem-tabs-trigger ${props.class}` : 'zylem-tabs-trigger'
+      }
+      value={props.value}
+      disabled={props.disabled}
+    >
+      {props.children}
+    </KTabs.Trigger>
+  );
+}
+
+export function TabsContent(props: {
+  value: string;
+  children: JSX.Element;
+  class?: string;
+}) {
+  return (
+    <KTabs.Content
+      class={
+        props.class ? `zylem-tabs-content ${props.class}` : 'zylem-tabs-content'
+      }
+      value={props.value}
+    >
+      {props.children}
+    </KTabs.Content>
+  );
+}
+
+Tabs.List = TabsList;
+Tabs.Trigger = TabsTrigger;
+Tabs.Content = TabsContent;

package/src/components/TextField/TextField.css.ts

@@ -0,0 +1,16 @@
+import { globalStyle } from '@vanilla-extract/css';
+import { vars } from '../../theme.css';
+import '../shared/field.css';
+
+globalStyle('.zylem-textfield-input', {
+  width: '100%',
+  height: '28px',
+});
+
+globalStyle('.zylem-textfield-textarea', {
+  width: '100%',
+  minHeight: '72px',
+  padding: vars.spacing.sm,
+  resize: 'vertical',
+  lineHeight: 1.45,
+});

package/src/components/TextField/TextField.tsx

@@ -0,0 +1,76 @@
+import { TextField as KTextField } from '@kobalte/core';
+import { Show, splitProps } from 'solid-js';
+import type { JSX } from 'solid-js';
+
+export interface TextFieldProps {
+  label?: string;
+  error?: string;
+  placeholder?: string;
+  value?: string;
+  onChange?: (value: string) => void;
+  onInput?: JSX.EventHandlerUnion<HTMLInputElement | HTMLTextAreaElement, InputEvent>;
+  type?: string;
+  name?: string;
+  disabled?: boolean;
+  readOnly?: boolean;
+  required?: boolean;
+  multiline?: boolean;
+  rows?: number;
+  class?: string;
+  autofocus?: boolean;
+  onKeyDown?: JSX.EventHandlerUnion<HTMLInputElement | HTMLTextAreaElement, KeyboardEvent>;
+}
+
+/**
+ * HyperGlass text field: inset glass input with an uppercase HyperCard-style
+ * label. Set `multiline` for a textarea.
+ */
+export function TextField(props: TextFieldProps) {
+  const [local] = splitProps(props, ['label', 'error', 'multiline', 'class']);
+
+  return (
+    <KTextField.Root
+      class={local.class ? `zylem-field-root ${local.class}` : 'zylem-field-root'}
+      value={props.value}
+      onChange={props.onChange}
+      name={props.name}
+      disabled={props.disabled}
+      readOnly={props.readOnly}
+      required={props.required}
+      validationState={local.error ? 'invalid' : 'valid'}
+    >
+      <Show when={local.label}>
+        <KTextField.Label class="zylem-field-label">
+          {local.label}
+        </KTextField.Label>
+      </Show>
+      <Show
+        when={local.multiline}
+        fallback={
+          <KTextField.Input
+            class="zylem-field zylem-textfield-input"
+            type={props.type ?? 'text'}
+            placeholder={props.placeholder}
+            autofocus={props.autofocus}
+            onInput={props.onInput as JSX.EventHandlerUnion<HTMLInputElement, InputEvent>}
+            onKeyDown={props.onKeyDown as JSX.EventHandlerUnion<HTMLInputElement, KeyboardEvent>}
+          />
+        }
+      >
+        <KTextField.TextArea
+          class="zylem-field zylem-textfield-textarea"
+          placeholder={props.placeholder}
+          rows={props.rows}
+          autofocus={props.autofocus}
+          onInput={props.onInput as JSX.EventHandlerUnion<HTMLTextAreaElement, InputEvent>}
+          onKeyDown={props.onKeyDown as JSX.EventHandlerUnion<HTMLTextAreaElement, KeyboardEvent>}
+        />
+      </Show>
+      <Show when={local.error}>
+        <KTextField.ErrorMessage class="zylem-field-error">
+          {local.error}
+        </KTextField.ErrorMessage>
+      </Show>
+    </KTextField.Root>
+  );
+}

package/src/components/TitleBar/TitleBar.css.ts

@@ -0,0 +1,46 @@
+import { globalStyle } from '@vanilla-extract/css';
+import { vars } from '../../theme.css';
+
+/**
+ * Glossy molded title bar: vertical gradient glass with inner highlight,
+ * like a bar of molded glass rather than a flat web header.
+ */
+globalStyle('.zylem-titlebar', {
+  boxSizing: 'border-box',
+  minHeight: '42px',
+  display: 'flex',
+  alignItems: 'center',
+  gap: vars.spacing.sm,
+  padding: `0 ${vars.spacing.md}`,
+  background: vars.material.glossyBar,
+  borderBottom: '1px solid rgba(5, 18, 32, 0.85)',
+  boxShadow:
+    'inset 0 1px 0 rgba(255,255,255,0.62), inset 0 -1px 0 rgba(255,255,255,0.08)',
+  userSelect: 'none',
+});
+
+globalStyle('.zylem-titlebar--compact', {
+  minHeight: '32px',
+  padding: `0 ${vars.spacing.sm}`,
+});
+
+globalStyle('.zylem-titlebar-title', {
+  flex: 1,
+  fontSize: '13px',
+  fontWeight: 700,
+  letterSpacing: '0.02em',
+  color: '#F4FAFF',
+  fontFamily: vars.typography.fontFamily,
+  textShadow: '0 1px 1px rgba(0,0,0,0.65)',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+});
+
+globalStyle('.zylem-titlebar--draggable', {
+  cursor: 'grab',
+});
+
+globalStyle('.zylem-titlebar--draggable:active', {
+  cursor: 'grabbing',
+});