@weasel-js/ui 1.6.0 → 1.7.0

package/dist/chunks/Tabs-BbpzLLdY.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs-BbpzLLdY.js","names":["Tabs","RACTabs","s","TabList","RACTabList","Tab","RACTab","TabPanel","RACTabPanel","Tabs_module_default","Tabs$1","rest","Tabs","className","TabList$1","TabList","Tab$1","Tab","TabPanel$1","TabPanel"],"sources":["../../src/components/Tabs/Tabs.module.css","../../src/components/Tabs/Tabs.tsx"],"sourcesContent":[".tabs {\n  display: flex;\n  flex-direction: column;\n  gap: 0;\n  font-family: var(--wzl-font-ui);\n  color: var(--wzl-fg);\n}\n\n.tabs[data-orientation=\"horizontal\"] {\n  flex-direction: column;\n}\n\n.tabs[data-orientation=\"vertical\"] {\n  flex-direction: row;\n  gap: var(--wzl-space-6);\n}\n\n.list {\n  display: flex;\n  gap: var(--wzl-space-1);\n  border-bottom: 1px solid var(--wzl-border);\n}\n\n.tabs[data-orientation=\"vertical\"] .list {\n  flex-direction: column;\n  border-bottom: none;\n  border-right: 1px solid var(--wzl-border);\n  padding-right: var(--wzl-space-4);\n}\n\n.tab {\n  position: relative;\n  padding: var(--wzl-space-3) var(--wzl-space-5);\n  background: transparent;\n  border: none;\n  color: var(--wzl-fg-muted);\n  font: inherit;\n  font-size: var(--wzl-font-size-sm);\n  cursor: pointer;\n  outline: none;\n  transition: color var(--wzl-motion-fast);\n}\n\n.tab[data-hovered]:not([data-disabled]) {\n  color: var(--wzl-fg);\n}\n\n.tab[data-selected] {\n  color: var(--wzl-fg);\n}\n\n.tab[data-selected]::after {\n  content: '';\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: -1px;\n  height: 2px;\n  background: var(--wzl-accent-strong);\n}\n\n.tabs[data-orientation=\"vertical\"] .tab[data-selected]::after {\n  left: auto;\n  right: -9px;\n  top: 0;\n  bottom: 0;\n  width: 2px;\n  height: auto;\n}\n\n.tab[data-focus-visible] {\n  box-shadow: inset 0 0 0 2px var(--wzl-focus-ring);\n  border-radius: var(--wzl-radius-sm);\n}\n\n.tab[data-disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.panel {\n  padding: var(--wzl-space-6) 0;\n  outline: none;\n}\n\n.panel[data-focus-visible] {\n  box-shadow: inset 0 0 0 2px var(--wzl-focus-ring);\n  border-radius: var(--wzl-radius-sm);\n}\n","import type { ReactNode } from 'react';\nimport {\n  Tabs as RACTabs,\n  TabList as RACTabList,\n  Tab as RACTab,\n  TabPanel as RACTabPanel,\n  type TabsProps as RACTabsProps,\n  type TabListProps as RACTabListProps,\n  type TabProps as RACTabProps,\n  type TabPanelProps as RACTabPanelProps,\n} from 'react-aria-components';\nimport s from './Tabs.module.css';\n\n/** Props for {@link Tabs}, on top of React Aria's `Tabs` props. */\nexport type TabsProps = Omit<RACTabsProps, 'className' | 'children'> & {\n  children?: ReactNode;\n  className?: string;\n};\n\n/**\n * Tab set wrapping React Aria's Tabs, skinned against the `--wzl-*` tokens.\n * Holds a {@link TabList} and one {@link TabPanel} per tab.\n */\nexport function Tabs({ children, className, ...rest }: TabsProps) {\n  return (\n    <RACTabs {...rest} className={[s.tabs, className].filter(Boolean).join(' ')}>\n      {children}\n    </RACTabs>\n  );\n}\n\n/** Props for {@link TabList}, on top of React Aria's `TabList` props. */\nexport type TabListProps<T extends object> = Omit<RACTabListProps<T>, 'className'> & {\n  className?: string;\n};\n\n/** The row of tab buttons inside a {@link Tabs}. */\nexport function TabList<T extends object>({ className, ...rest }: TabListProps<T>) {\n  return <RACTabList<T> {...rest} className={[s.list, className].filter(Boolean).join(' ')} />;\n}\n\n/** Props for {@link Tab}, on top of React Aria's `Tab` props. */\nexport type TabProps = Omit<RACTabProps, 'className' | 'children'> & {\n  children?: ReactNode;\n  className?: string;\n};\n\n/** One tab button. Its `id` selects the {@link TabPanel} it reveals. */\nexport function Tab({ children, className, ...rest }: TabProps) {\n  return (\n    <RACTab {...rest} className={[s.tab, className].filter(Boolean).join(' ')}>\n      {children}\n    </RACTab>\n  );\n}\n\n/** Props for {@link TabPanel}, on top of React Aria's `TabPanel` props. */\nexport type TabPanelProps = Omit<RACTabPanelProps, 'className' | 'children'> & {\n  children?: ReactNode;\n  className?: string;\n};\n\n/** The content shown for the {@link Tab} whose `id` matches this panel's. */\nexport function TabPanel({ children, className, ...rest }: TabPanelProps) {\n  return (\n    <RACTabPanel {...rest} className={[s.panel, className].filter(Boolean).join(' ')}>\n      {children}\n    </RACTabPanel>\n  );\n}\n"],"mappings":";;;;;;;;;;ACuBA,SAAgBA,EAAK,EAAE,aAAU,cAAW,GAAGW,KAAmB;CAChE,OACE,kBAACV,GAAD;EAAS,GAAIU;EAAM,WAAW,CAACT,EAAE,MAAMW,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EACvE;CACM,CAAA;AAEb;AAQA,SAAgBV,EAA0B,EAAE,cAAW,GAAGQ,KAAyB;CACjF,OAAO,kBAACP,GAAD;EAAe,GAAIO;EAAM,WAAW,CAACT,EAAE,MAAMW,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAAI,CAAA;AAC7F;AASA,SAAgBR,EAAI,EAAE,aAAU,cAAW,GAAGM,KAAkB;CAC9D,OACE,kBAACL,GAAD;EAAQ,GAAIK;EAAM,WAAW,CAACT,EAAE,KAAKW,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EACrE;CACK,CAAA;AAEZ;AASA,SAAgBN,EAAS,EAAE,aAAU,cAAW,GAAGI,KAAuB;CACxE,OACE,kBAACH,GAAD;EAAa,GAAIG;EAAM,WAAW,CAACT,EAAE,OAAOW,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EAC5E;CACU,CAAA;AAEjB"}

package/dist/chunks/ThemeSwitcher-BlsInAmR.js

@@ -0,0 +1,38 @@
+import { $ as e, Q as t, Z as n } from "./icons-BhcR1l64.js";
+import { t as r } from "./Button-BIdXHQOx.js";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/ThemeSwitcher/ThemeSwitcher.tsx
+var a = [
+	{
+		value: "auto",
+		icon: /* @__PURE__ */ i(n, { size: 16 }),
+		label: "Auto"
+	},
+	{
+		value: "light",
+		icon: /* @__PURE__ */ i(e, { size: 16 }),
+		label: "Light"
+	},
+	{
+		value: "dark",
+		icon: /* @__PURE__ */ i(t, { size: 16 }),
+		label: "Dark"
+	}
+];
+function o({ value: e, onChange: t, options: n = a, ariaLabel: o = "Theme", size: s = "sm", variant: c = "ghost", className: l }) {
+	let u = n.length, d = Math.max(0, n.findIndex((t) => t.value === e)), f = n[d], p = n[(d + 1) % u], m = n[(d - 1 + u) % u], h = `${o}: ${f.label} — click for ${p.label}`;
+	return /* @__PURE__ */ i(r, {
+		variant: c,
+		size: s,
+		iconOnly: !0,
+		ariaLabel: h,
+		tooltip: h,
+		className: l,
+		onClick: (e) => t((e.shiftKey ? m : p).value),
+		children: f.icon
+	});
+}
+//#endregion
+export { o as n, a as t };
+
+//# sourceMappingURL=ThemeSwitcher-BlsInAmR.js.map

package/dist/chunks/ThemeSwitcher-BlsInAmR.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeSwitcher-BlsInAmR.js","names":["ModeLightIcon","ModeDarkIcon","ModeAutoIcon","Button","COLOR_MODE_OPTIONS","ThemeSwitcher","count","options","index","o","value","current","next","previous","name","ariaLabel","onChange","event"],"sources":["../../src/components/ThemeSwitcher/ThemeSwitcher.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from 'react';\nimport type { ColorModePreference } from '@weasel-js/theme';\nimport { ModeAutoIcon, ModeDarkIcon, ModeLightIcon } from '../../icons';\nimport { Button, type ButtonSize, type ButtonVariant } from '../Button/Button';\n\n/** One stop in a {@link ThemeSwitcher}'s rotation. */\nexport interface ThemeSwitcherOption<T extends string = string> {\n  value: T;\n  /** Drawn in the button while this option is current. */\n  icon: ReactNode;\n  /** The option's name, read in the accessible name and tooltip. */\n  label: string;\n}\n\n/** The color modes, in rotation order, as {@link ThemeSwitcher} cycles them by default. */\nexport const COLOR_MODE_OPTIONS: readonly ThemeSwitcherOption<ColorModePreference>[] = [\n  { value: 'auto', icon: <ModeAutoIcon size={16} />, label: 'Auto' },\n  { value: 'light', icon: <ModeLightIcon size={16} />, label: 'Light' },\n  { value: 'dark', icon: <ModeDarkIcon size={16} />, label: 'Dark' },\n];\n\n/** Props for {@link ThemeSwitcher}. */\nexport interface ThemeSwitcherProps<T extends string = ColorModePreference> {\n  value: T;\n  onChange: (next: T) => void;\n  /** The rotation, in order. Defaults to {@link COLOR_MODE_OPTIONS}. */\n  options?: readonly ThemeSwitcherOption<T>[];\n  /** What is being switched, leading the accessible name and tooltip\n   *  (`Theme: Auto — click for Light`). Defaults to `'Theme'`. */\n  ariaLabel?: string;\n  /** Defaults to `sm`, the size of a header's icon buttons. */\n  size?: ButtonSize;\n  /** Defaults to `ghost`. */\n  variant?: ButtonVariant;\n  className?: string;\n}\n\n/**\n * One icon button that steps through a list of options: a click moves to the\n * next, a shift-click to the previous, both wrapping. It shows the current\n * option's icon, and its name and tooltip say what is current and what a\n * click chooses. The compact alternative to `ColorModeControl`'s three\n * segments. Controlled: pair the default color modes with\n * `useColorModePreference` from `@weasel-js/theme/react`.\n */\nexport function ThemeSwitcher<T extends string = ColorModePreference>({\n  value,\n  onChange,\n  options = COLOR_MODE_OPTIONS as unknown as readonly ThemeSwitcherOption<T>[],\n  ariaLabel = 'Theme',\n  size = 'sm',\n  variant = 'ghost',\n  className,\n}: ThemeSwitcherProps<T>): ReactElement {\n  const count = options.length;\n  const index = Math.max(0, options.findIndex((o) => o.value === value));\n  const current = options[index];\n  const next = options[(index + 1) % count];\n  const previous = options[(index - 1 + count) % count];\n  const name = `${ariaLabel}: ${current.label} — click for ${next.label}`;\n\n  return (\n    <Button\n      variant={variant}\n      size={size}\n      iconOnly\n      ariaLabel={name}\n      tooltip={name}\n      className={className}\n      onClick={(event) => onChange((event.shiftKey ? previous : next).value)}\n    >\n      {current.icon}\n    </Button>\n  );\n}\n"],"mappings":";;;;AAeA,IAAaI,IAA0E;CACrF;EAAE,OAAO;EAAQ,MAAM,kBAACF,GAAD,EAAc,MAAM,GAAK,CAAA;EAAG,OAAO;CAAO;CACjE;EAAE,OAAO;EAAS,MAAM,kBAACF,GAAD,EAAe,MAAM,GAAK,CAAA;EAAG,OAAO;CAAQ;CACpE;EAAE,OAAO;EAAQ,MAAM,kBAACC,GAAD,EAAc,MAAM,GAAK,CAAA;EAAG,OAAO;CAAO;AACnE;AA0BA,SAAgBI,EAAsD,EACpE,UACA,aACA,aAAUD,GACV,eAAY,SACZ,UAAO,MACP,aAAU,SACV,gBACsC;CACtC,IAAME,IAAQC,EAAQ,QAChBC,IAAQ,KAAK,IAAI,GAAGD,EAAQ,WAAW,MAAME,EAAE,UAAUC,CAAK,CAAC,GAC/DC,IAAUJ,EAAQC,IAClBI,IAAOL,GAASC,IAAQ,KAAKF,IAC7BO,IAAWN,GAASC,IAAQ,IAAIF,KAASA,IACzCQ,IAAO,GAAGC,EAAU,IAAIJ,EAAQ,MAAM,eAAeC,EAAK;CAEhE,OACE,kBAACT,GAAD;EACW;EACH;EACN,UAAA;EACA,WAAWW;EACX,SAASA;EACE;EACX,UAAU,MAAUE,GAAUC,EAAM,WAAWJ,IAAWD,EAAA,CAAM,KAAK;EAEpE,UAAAD,EAAQ;CACH,CAAA;AAEZ"}