innxt-design-system 1.6.0

package/docs/src/app/(private)/experiments/tabs/tabs-basic.module.css

@@ -0,0 +1,162 @@
+.tabs {
+  border: 1px solid var(--color-gray-200);
+  border-radius: 0.375rem;
+
+  &[data-orientation='vertical'] {
+    display: flex;
+    flex-direction: row;
+    gap: 0.5rem;
+    box-shadow: inset -1px 0 var(--color-gray-200);
+    min-width: 400px;
+  }
+}
+
+.list {
+  display: flex;
+  position: relative;
+  z-index: 0;
+  padding: 0.25rem;
+  gap: 0.25rem;
+  box-shadow: inset 0 -1px var(--color-gray-200);
+
+  &[data-orientation='vertical'] {
+    flex-direction: column;
+    padding: 0.5rem;
+    box-shadow: inset -1px 0 var(--color-gray-200);
+  }
+}
+
+.tab {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  border: 0;
+  margin: 0;
+  outline: 0;
+  background: none;
+  appearance: none;
+  color: var(--color-gray-600);
+  font-family: inherit;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 500;
+  -webkit-user-select: none;
+  user-select: none;
+  white-space: nowrap;
+  word-break: keep-all;
+  padding-inline: 0.5rem;
+  padding-block: 0;
+  height: 1.5rem;
+
+  &[data-orientation='vertical'] {
+    height: 2rem;
+  }
+
+  &[data-active] {
+    background: var(--color-gray-100);
+    border-radius: 0.25rem;
+    color: var(--color-gray-900);
+  }
+
+  &[data-disabled] {
+    color: var(--color-gray-400);
+  }
+
+  @media (hover: hover) {
+    &:not([data-disabled]):hover {
+      color: var(--color-gray-900);
+    }
+  }
+
+  &:focus-visible {
+    position: relative;
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-radius: 0.25rem;
+      outline: 2px solid var(--color-blue);
+      outline-offset: -1px;
+    }
+  }
+}
+
+.indicator {
+  flex-shrink: 0;
+  position: absolute;
+  z-index: -1;
+  /* easier to debug than a single `inset:` */
+  top: var(--active-tab-top);
+  right: var(--active-tab-right);
+  bottom: var(--active-tab-bottom);
+  left: var(--active-tab-left);
+  border-radius: 0.25rem;
+  background-color: var(--color-gray-100);
+  transition-property: left, right, top, bottom;
+  transition-duration: 200ms;
+  transition-timing-function: ease-in-out;
+
+  &[data-orientation='vertical'] {
+    /*
+      handles an edge case when the tabs list is overflowing vertically,
+      the indicator could be incorrectly sized when arrow keys change the tab
+      and scroll the container at the same time
+    */
+    height: var(--active-tab-height);
+  }
+
+  &.elastic {
+    &[data-activation-direction='right'] {
+      transition:
+        left 0.6s 0.1s,
+        right 0.3s,
+        top 0.3s,
+        bottom 0.3s;
+    }
+
+    &[data-activation-direction='down'] {
+      transition:
+        top 0.6s 0.1s,
+        bottom 0.3s;
+    }
+
+    &[data-activation-direction='left'] {
+      transition:
+        left 0.3s,
+        right 0.6s 0.1s,
+        top 0.3s,
+        bottom 0.3s;
+    }
+
+    &[data-activation-direction='up'] {
+      transition:
+        top 0.3s,
+        bottom 0.6s 0.1s;
+    }
+  }
+}
+
+.panel {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  outline: 0;
+  flex: 1 0 auto;
+
+  &[data-hidden] {
+    display: none;
+  }
+
+  &[data-orientation='horizontal'] {
+    height: 8rem;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--color-blue);
+    outline-offset: -1px;
+    border-radius: 0.375rem;
+  }
+}

package/docs/src/app/(private)/experiments/tabs/tabs-basic.tsx

@@ -0,0 +1,96 @@
+'use client';
+import * as React from 'react';
+import clsx from 'clsx';
+import { DirectionProvider } from '@lizuzsusil/react/direction-provider';
+import { Tabs } from '@lizuzsusil/react/tabs';
+import { SettingsMetadata, useExperimentSettings } from '../_components/SettingsPanel';
+import '../../../../demo-data/theme/css-modules/theme.css';
+import classes from './tabs-basic.module.css';
+
+export default function TabsExperiment() {
+  const [value, setValue] = React.useState<string | number | null>(0);
+  const { settings } = useExperimentSettings<Settings>();
+
+  const direction = settings.direction;
+
+  return (
+    <div dir={direction}>
+      <DirectionProvider direction={direction}>
+        <h1>Tabs</h1>
+        <Tabs.Root
+          className={classes.tabs}
+          value={value}
+          onValueChange={(val) => setValue(val)}
+          orientation={settings.orientation}
+        >
+          <Tabs.List className={classes.list} activateOnFocus={settings.activateOnFocus}>
+            <Tabs.Tab className={classes.tab} value={0}>
+              Code
+            </Tabs.Tab>
+            <Tabs.Tab className={classes.tab} value={1}>
+              Issues
+            </Tabs.Tab>
+            <Tabs.Tab className={classes.tab} value={2}>
+              Pull Requests
+            </Tabs.Tab>
+            <Tabs.Tab className={classes.tab} value={3} disabled>
+              Discussions
+            </Tabs.Tab>
+            <Tabs.Tab className={classes.tab} value={4}>
+              Actions
+            </Tabs.Tab>
+            <Tabs.Indicator
+              className={clsx(classes.indicator, settings.elasticIndicator && classes.elastic)}
+            />
+          </Tabs.List>
+          <Tabs.Panel className={classes.panel} value={0} keepMounted>
+            Code panel
+          </Tabs.Panel>
+          <Tabs.Panel className={classes.panel} value={1} keepMounted>
+            Issues panel
+          </Tabs.Panel>
+          <Tabs.Panel className={classes.panel} value={2} keepMounted>
+            Pull Requests panel
+          </Tabs.Panel>
+          <Tabs.Panel className={classes.panel} value={3} keepMounted>
+            Discussions panel
+          </Tabs.Panel>
+          <Tabs.Panel className={classes.panel} value={4} keepMounted>
+            Actions panel
+          </Tabs.Panel>
+        </Tabs.Root>
+      </DirectionProvider>
+    </div>
+  );
+}
+
+interface Settings {
+  direction: 'ltr' | 'rtl';
+  orientation: 'horizontal' | 'vertical';
+  activateOnFocus: boolean;
+  elasticIndicator: boolean;
+}
+
+export const settingsMetadata: SettingsMetadata<Settings> = {
+  direction: {
+    type: 'string',
+    label: 'Direction',
+    options: ['ltr', 'rtl'],
+    default: 'ltr',
+  },
+  orientation: {
+    type: 'string',
+    label: 'Orientation',
+    options: ['horizontal', 'vertical'],
+    default: 'horizontal',
+  },
+  activateOnFocus: {
+    type: 'boolean',
+    label: 'Activate on focus',
+    default: true,
+  },
+  elasticIndicator: {
+    type: 'boolean',
+    label: 'Elastic indicator',
+  },
+};

package/docs/src/app/(private)/experiments/tabs/tabs-onValueChange.module.css

@@ -0,0 +1,187 @@
+.page {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  padding: 1.5rem;
+}
+
+.header {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.title {
+  margin: 0;
+  font-size: 1.75rem;
+}
+
+.description {
+  max-width: 52rem;
+  margin: 0.5rem 0 0;
+  color: var(--color-gray-600);
+}
+
+.summary {
+  display: grid;
+  gap: 0.5rem;
+  align-content: start;
+  min-width: 14rem;
+  padding: 1rem;
+  border: 1px solid var(--color-gray-200);
+  border-radius: 0.75rem;
+  background: var(--color-gray-50);
+  font-size: 0.875rem;
+}
+
+.layout {
+  display: grid;
+  grid-template-columns: minmax(18rem, 24rem) minmax(0, 1fr);
+  gap: 1.5rem;
+}
+
+.controlsPanel,
+.previewCard,
+.logCard {
+  border: 1px solid var(--color-gray-200);
+  border-radius: 1rem;
+  background: white;
+}
+
+.controlsPanel {
+  padding: 1rem;
+}
+
+.controlsHeader {
+  display: grid;
+  gap: 0.75rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid var(--color-gray-200);
+}
+
+.inputLabel {
+  display: grid;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.input {
+  width: 100%;
+}
+
+.hint {
+  margin: 0;
+  color: var(--color-gray-600);
+  font-size: 0.875rem;
+}
+
+.buttonRow {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.tabControls {
+  display: grid;
+  gap: 0.75rem;
+  margin-top: 1rem;
+}
+
+.tabRow {
+  display: grid;
+  gap: 0.75rem;
+  padding: 0.875rem;
+  border: 1px solid var(--color-gray-200);
+  border-radius: 0.75rem;
+}
+
+.tabMeta {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  align-items: center;
+  font-size: 0.875rem;
+}
+
+.tabMeta span {
+  color: var(--color-gray-600);
+}
+
+.switches {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.previewPanel {
+  display: grid;
+  gap: 1rem;
+}
+
+.previewCard {
+  padding: 1rem;
+}
+
+.panelDetails {
+  display: grid;
+  gap: 0.375rem;
+  justify-items: center;
+  text-align: center;
+}
+
+.panelGhost {
+  background: linear-gradient(135deg, rgb(239 68 68 / 0.08), transparent 65%), white;
+}
+
+.logCard {
+  padding: 1rem;
+}
+
+.logHeader {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  align-items: center;
+  margin-bottom: 0.75rem;
+}
+
+.logHeader h2 {
+  margin: 0;
+  font-size: 1rem;
+}
+
+.emptyState {
+  margin: 0;
+  color: var(--color-gray-600);
+}
+
+.logList {
+  display: grid;
+  gap: 0.5rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.logItem {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  border-radius: 0.75rem;
+  background: var(--color-gray-50);
+  font-family: ui-monospace, monospace;
+  font-size: 0.875rem;
+}
+
+@media (max-width: 900px) {
+  .page {
+    padding: 1rem;
+  }
+
+  .layout {
+    grid-template-columns: 1fr;
+  }
+}

package/docs/src/app/(private)/experiments/tabs/tabs-onValueChange.tsx

@@ -0,0 +1,260 @@
+'use client';
+import * as React from 'react';
+import clsx from 'clsx';
+import { Tabs } from '@lizuzsusil/react/tabs';
+import '../../../../demo-data/theme/css-modules/theme.css';
+import { Button } from '../_components/Button';
+import { Input } from '../_components/Input';
+import { Switch } from '../_components/Switch';
+import classes from './tabs-onValueChange.module.css';
+import sharedTabsClasses from './tabs-basic.module.css';
+
+type TabId = 0 | 1 | 2;
+
+interface TabConfig {
+  id: TabId;
+  label: string;
+  disabled: boolean;
+  rendered: boolean;
+}
+
+interface ChangeEventEntry {
+  id: number;
+  reason: Tabs.Root.ChangeEventDetails['reason'];
+  value: string;
+}
+
+const INITIAL_TABS: TabConfig[] = [
+  { id: 0, label: 'Overview', disabled: false, rendered: true },
+  { id: 1, label: 'Details', disabled: false, rendered: true },
+  { id: 2, label: 'Activity', disabled: false, rendered: true },
+];
+
+export default function TabsRegressionExperiment() {
+  const [tabs, setTabs] = React.useState(INITIAL_TABS);
+  const [defaultValueInput, setDefaultValueInput] = React.useState('0');
+  const [appliedDefaultValue, setAppliedDefaultValue] = React.useState<Tabs.Tab.Value | undefined>(
+    0,
+  );
+  const [keepPanelsMounted, setKeepPanelsMounted] = React.useState(true);
+  const [mountKey, setMountKey] = React.useState(0);
+  const [events, setEvents] = React.useState<ChangeEventEntry[]>([]);
+
+  const parsedDefaultValue = React.useMemo(
+    () => parseDefaultValue(defaultValueInput),
+    [defaultValueInput],
+  );
+  const renderedTabs = tabs.filter((tab) => tab.rendered);
+
+  const updateTab = React.useCallback((id: TabId, patch: Partial<TabConfig>) => {
+    setTabs((prevTabs) =>
+      prevTabs.map((tab) => {
+        if (tab.id !== id) {
+          return tab;
+        }
+
+        return { ...tab, ...patch };
+      }),
+    );
+  }, []);
+
+  const handleRemount = React.useCallback(() => {
+    setEvents([]);
+    setAppliedDefaultValue(parsedDefaultValue);
+    setMountKey((prevKey) => prevKey + 1);
+  }, [parsedDefaultValue]);
+
+  const handleReset = React.useCallback(() => {
+    setTabs(INITIAL_TABS);
+    setDefaultValueInput('0');
+    setAppliedDefaultValue(0);
+    setKeepPanelsMounted(true);
+    setEvents([]);
+    setMountKey((prevKey) => prevKey + 1);
+  }, []);
+
+  const handleValueChange = React.useCallback(
+    (value: Tabs.Tab.Value, eventDetails: Tabs.Root.ChangeEventDetails) => {
+      setEvents((prevEvents) => [
+        {
+          id: prevEvents.length + 1,
+          reason: eventDetails.reason,
+          value: formatValue(value),
+        },
+        ...prevEvents,
+      ]);
+    },
+    [],
+  );
+
+  return (
+    <div className={classes.page}>
+      <div className={classes.header}>
+        <div>
+          <h1 className={classes.title}>Tabs onValueChange</h1>
+          <p className={classes.description}>
+            Toggle tabs on and off, change the next <code>defaultValue</code>, then remount to test
+            fallback behavior manually. Switch panel mounting modes to check stale visibility and
+            remount behavior.
+          </p>
+        </div>
+        <div className={classes.summary}>
+          <div>Mount key: {mountKey}</div>
+          <div>Next defaultValue: {formatValue(parsedDefaultValue)}</div>
+          <div>Rendered tabs: {renderedTabs.length}</div>
+          <div>Panels keepMounted: {keepPanelsMounted ? 'yes' : 'no'}</div>
+        </div>
+      </div>
+
+      <div className={classes.layout}>
+        <section className={classes.controlsPanel}>
+          <div className={classes.controlsHeader}>
+            <label className={classes.inputLabel}>
+              <span>Next defaultValue</span>
+              <Input
+                className={classes.input}
+                value={defaultValueInput}
+                onChange={(event) => setDefaultValueInput(event.currentTarget.value)}
+                placeholder='0, 1, 2, 999, "abc", null'
+              />
+            </label>
+            <p className={classes.hint}>
+              Numeric strings become numbers, <code>null</code> becomes <code>null</code>, empty
+              field becomes <code>undefined</code>, and any other text stays a string.
+            </p>
+            <div className={classes.buttonRow}>
+              <Button variant="text" onClick={handleRemount}>
+                Remount Tabs
+              </Button>
+              <Button variant="text" onClick={handleReset}>
+                Reset everything
+              </Button>
+            </div>
+            <Switch
+              label="Keep panels mounted"
+              checked={keepPanelsMounted}
+              onCheckedChange={setKeepPanelsMounted}
+            />
+          </div>
+
+          <div className={classes.tabControls}>
+            {tabs.map((tab) => (
+              <div key={tab.id} className={classes.tabRow}>
+                <div className={classes.tabMeta}>
+                  <strong>{tab.label}</strong>
+                  <span>value={tab.id}</span>
+                </div>
+                <div className={classes.switches}>
+                  <Switch
+                    label="Rendered"
+                    checked={tab.rendered}
+                    onCheckedChange={(checked) => updateTab(tab.id, { rendered: checked })}
+                  />
+                  <Switch
+                    label="Disabled"
+                    checked={tab.disabled}
+                    onCheckedChange={(checked) => updateTab(tab.id, { disabled: checked })}
+                  />
+                </div>
+              </div>
+            ))}
+          </div>
+        </section>
+
+        <section className={classes.previewPanel}>
+          <div className={classes.previewCard}>
+            <Tabs.Root
+              key={mountKey}
+              className={sharedTabsClasses.tabs}
+              defaultValue={appliedDefaultValue}
+              onValueChange={handleValueChange}
+            >
+              <Tabs.List className={sharedTabsClasses.list}>
+                {tabs.map((tab) =>
+                  tab.rendered ? (
+                    <Tabs.Tab
+                      key={tab.id}
+                      className={sharedTabsClasses.tab}
+                      value={tab.id}
+                      disabled={tab.disabled}
+                    >
+                      {tab.label}
+                    </Tabs.Tab>
+                  ) : null,
+                )}
+              </Tabs.List>
+
+              {tabs.map((tab) => (
+                <Tabs.Panel
+                  key={tab.id}
+                  className={clsx(sharedTabsClasses.panel, !tab.rendered && classes.panelGhost)}
+                  value={tab.id}
+                  keepMounted={keepPanelsMounted}
+                >
+                  <div className={classes.panelDetails}>
+                    <strong>{tab.label}</strong>
+                    <span>Panel value: {tab.id}</span>
+                    <span>Tab disabled: {tab.disabled ? 'yes' : 'no'}</span>
+                  </div>
+                </Tabs.Panel>
+              ))}
+            </Tabs.Root>
+          </div>
+
+          <div className={classes.logCard}>
+            <div className={classes.logHeader}>
+              <h2>onValueChange log</h2>
+              <Button variant="text" onClick={() => setEvents([])}>
+                Clear log
+              </Button>
+            </div>
+            {events.length === 0 ? (
+              <p className={classes.emptyState}>No events yet.</p>
+            ) : (
+              <ol className={classes.logList}>
+                {events.map((event) => (
+                  <li key={event.id} className={classes.logItem}>
+                    <span>#{event.id}</span>
+                    <span>value={event.value}</span>
+                    <span>reason={event.reason}</span>
+                  </li>
+                ))}
+              </ol>
+            )}
+          </div>
+        </section>
+      </div>
+    </div>
+  );
+}
+
+function parseDefaultValue(value: string): Tabs.Tab.Value | undefined {
+  const trimmedValue = value.trim();
+
+  if (trimmedValue === '') {
+    return undefined;
+  }
+
+  if (trimmedValue === 'null') {
+    return null;
+  }
+
+  const numericValue = Number(trimmedValue);
+  if (!Number.isNaN(numericValue)) {
+    return numericValue;
+  }
+
+  return trimmedValue;
+}
+
+function formatValue(value: Tabs.Tab.Value | undefined) {
+  if (value === undefined) {
+    return 'undefined';
+  }
+
+  if (value === null) {
+    return 'null';
+  }
+
+  return JSON.stringify(value);
+}