@weasel-js/ui 1.3.0 → 1.4.0-pre.1

package/dist/chunks/{Tabs-CIa-Idzu.js.map → Tabs-DT-dIt6d.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Tabs-CIa-Idzu.js","names":[],"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: 12px;\n}\n\n.list {\n  display: flex;\n  gap: 2px;\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: 8px;\n}\n\n.tab {\n  position: relative;\n  padding: 6px 10px;\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: 12px 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,SAAgB,EAAK,EAAE,aAAU,cAAW,GAAG,KAAmB;AAChE,QACE,kBAAC,GAAD;EAAS,GAAI;EAAM,WAAW,CAAC,EAAE,MAAM,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EACxE;EACO,CAAA;;AAUd,SAAgB,EAA0B,EAAE,cAAW,GAAG,KAAyB;AACjF,QAAO,kBAAC,GAAD;EAAe,GAAI;EAAM,WAAW,CAAC,EAAE,MAAM,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EAAI,CAAA;;AAU9F,SAAgB,EAAI,EAAE,aAAU,cAAW,GAAG,KAAkB;AAC9D,QACE,kBAAC,GAAD;EAAQ,GAAI;EAAM,WAAW,CAAC,EAAE,KAAK,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EACtE;EACM,CAAA;;AAWb,SAAgB,EAAS,EAAE,aAAU,cAAW,GAAG,KAAuB;AACxE,QACE,kBAAC,GAAD;EAAa,GAAI;EAAM,WAAW,CAAC,EAAE,OAAO,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EAC7E;EACW,CAAA"}
+{"version":3,"file":"Tabs-DT-dIt6d.js","names":[],"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: 12px;\n}\n\n.list {\n  display: flex;\n  gap: 2px;\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: 8px;\n}\n\n.tab {\n  position: relative;\n  padding: 6px 10px;\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: 12px 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,SAAgB,EAAK,EAAE,aAAU,cAAW,GAAG,KAAmB;AAChE,QACE,kBAAC,GAAD;EAAS,GAAI;EAAM,WAAW,CAAC,EAAE,MAAM,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EACxE;EACO,CAAA;;AAUd,SAAgB,EAA0B,EAAE,cAAW,GAAG,KAAyB;AACjF,QAAO,kBAAC,GAAD;EAAe,GAAI;EAAM,WAAW,CAAC,EAAE,MAAM,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EAAI,CAAA;;AAU9F,SAAgB,EAAI,EAAE,aAAU,cAAW,GAAG,KAAkB;AAC9D,QACE,kBAAC,GAAD;EAAQ,GAAI;EAAM,WAAW,CAAC,EAAE,KAAK,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EACtE;EACM,CAAA;;AAWb,SAAgB,EAAS,EAAE,aAAU,cAAW,GAAG,KAAuB;AACxE,QACE,kBAAC,GAAD;EAAa,GAAI;EAAM,WAAW,CAAC,EAAE,OAAO,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EAC7E;EACW,CAAA"}