@remix-run/ui 0.3.0 → 0.4.0

package/dist/{theme/presets/rmx-01/index.js → shared/style-values.js}

@@ -1,55 +1,32 @@
-import { createGlyphSheet } from "../../../components/glyph/glyph.js";
-import { createTheme } from "../../runtime.js";
-import { glyphValues } from "./glyphs.js";
-export const RMX_01 = createTheme({
+export const componentStyleValues = {
     space: {
         none: '0px',
-        px: '1px',
         xs: '4px',
         sm: '8px',
         md: '12px',
         lg: '16px',
-        xl: '24px',
-        xxl: '32px',
     },
     radius: {
-        none: '0px',
-        sm: '4px',
         md: '8px',
         lg: '12px',
         xl: '16px',
         full: '9999px',
     },
     fontSize: {
-        xxxs: '10px',
-        xxs: '11px',
         xs: '12px',
         sm: '13px',
         md: '14px',
-        lg: '16px',
-        xl: '20px',
-        xxl: '28px',
     },
     fontFamily: {
         sans: '"Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-        mono: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
     },
     lineHeight: {
-        tight: '1.25',
         normal: '1.45',
         relaxed: '1.65',
     },
-    letterSpacing: {
-        tight: '-0.03em',
-        normal: '0',
-        meta: '0.06em',
-        wide: '0.08em',
-    },
     fontWeight: {
         normal: '400',
         medium: '500',
-        semibold: '600',
-        bold: '700',
     },
     control: {
         height: {
@@ -69,27 +46,20 @@ export const RMX_01 = createTheme({
         xs: '0 1px 1px rgb(0 0 0 / 0.05)',
         sm: '0 1px 2px rgb(0 0 0 / 0.07)',
         md: '0 6px 18px rgb(0 0 0 / 0.08)',
-        lg: '0 16px 34px rgb(0 0 0 / 0.10)',
-        xl: '0 24px 52px rgb(0 0 0 / 0.14)',
     },
     colors: {
         text: {
             primary: '#151515',
             secondary: '#4f4f4f',
             muted: '#6d6d6d',
-            link: '#1A72FF',
         },
         border: {
             subtle: '#e7e7e7',
             default: '#d1d1d1',
-            strong: '#b0b0b0',
         },
         focus: {
             ring: '#1A72FF',
         },
-        overlay: {
-            scrim: 'rgb(0 0 0 / 0.28)',
-        },
         action: {
             primary: {
                 background: '#1A72FF',
@@ -114,6 +84,5 @@ export const RMX_01 = createTheme({
             },
         },
     },
-});
-export const RMX_01_GLYPHS = createGlyphSheet(glyphValues);
-//# sourceMappingURL=index.js.map
+};
+//# sourceMappingURL=style-values.js.map

package/dist/shared/style-values.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style-values.js","sourceRoot":"","sources":["../../src/shared/style-values.ts"],"names":[],"mappings":"AA8EA,MAAM,CAAC,MAAM,oBAAoB,GAAyB;IACxD,KAAK,EAAE;QACL,IAAI,EAAE,KAAK;QACX,EAAE,EAAE,KAAK;QACT,EAAE,EAAE,KAAK;QACT,EAAE,EAAE,MAAM;QACV,EAAE,EAAE,MAAM;KACX;IACD,MAAM,EAAE;QACN,EAAE,EAAE,KAAK;QACT,EAAE,EAAE,MAAM;QACV,EAAE,EAAE,MAAM;QACV,IAAI,EAAE,QAAQ;KACf;IACD,QAAQ,EAAE;QACR,EAAE,EAAE,MAAM;QACV,EAAE,EAAE,MAAM;QACV,EAAE,EAAE,MAAM;KACX;IACD,UAAU,EAAE;QACV,IAAI,EAAE,8FAA8F;KACrG;IACD,UAAU,EAAE;QACV,MAAM,EAAE,MAAM;QACd,OAAO,EAAE,MAAM;KAChB;IACD,UAAU,EAAE;QACV,MAAM,EAAE,KAAK;QACb,MAAM,EAAE,KAAK;KACd;IACD,OAAO,EAAE;QACP,MAAM,EAAE;YACN,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;SACX;KACF;IACD,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,SAAS;KAChB;IACD,MAAM,EAAE;QACN,EAAE,EAAE,6BAA6B;QACjC,EAAE,EAAE,6BAA6B;QACjC,EAAE,EAAE,8BAA8B;KACnC;IACD,MAAM,EAAE;QACN,IAAI,EAAE;YACJ,OAAO,EAAE,SAAS;YAClB,SAAS,EAAE,SAAS;YACpB,KAAK,EAAE,SAAS;SACjB;QACD,MAAM,EAAE;YACN,MAAM,EAAE,SAAS;YACjB,OAAO,EAAE,SAAS;SACnB;QACD,KAAK,EAAE;YACL,IAAI,EAAE,SAAS;SAChB;QACD,MAAM,EAAE;YACN,OAAO,EAAE;gBACP,UAAU,EAAE,SAAS;gBACrB,eAAe,EAAE,SAAS;gBAC1B,gBAAgB,EAAE,SAAS;gBAC3B,UAAU,EAAE,yBAAyB;gBACrC,MAAM,EAAE,SAAS;aAClB;YACD,SAAS,EAAE;gBACT,UAAU,EAAE,SAAS;gBACrB,eAAe,EAAE,SAAS;gBAC1B,gBAAgB,EAAE,SAAS;gBAC3B,UAAU,EAAE,SAAS;gBACrB,MAAM,EAAE,SAAS;aAClB;YACD,MAAM,EAAE;gBACN,UAAU,EAAE,SAAS;gBACrB,eAAe,EAAE,SAAS;gBAC1B,gBAAgB,EAAE,SAAS;gBAC3B,UAAU,EAAE,yBAAyB;gBACrC,MAAM,EAAE,SAAS;aAClB;SACF;KACF;CACF,CAAA"}

package/dist/{interactions/typeahead/typeahead-mixin.js → shared/typeahead.js}

@@ -56,4 +56,4 @@ export function matchNextItemBySearchText(text, items, options) {
     }
     return null;
 }
-//# sourceMappingURL=typeahead-mixin.js.map
+//# sourceMappingURL=typeahead.js.map

package/dist/shared/typeahead.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"typeahead.js","sourceRoot":"","sources":["../../src/shared/typeahead.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,EAAE,EAAqB,MAAM,eAAe,CAAA;AAElE,MAAM,wBAAwB,GAAG,GAAG,CAAA;AAMpC,MAAM,CAAC,MAAM,eAAe,GAAG,WAAW,CAIxC,CAAC,MAAM,EAAE,EAAE;IACX,IAAI,IAAI,GAAG,EAAE,CAAA;IACb,IAAI,SAAS,GAAG,CAAC,CAAA;IAEjB,SAAS,cAAc;QACrB,YAAY,CAAC,SAAS,CAAC,CAAA;QACvB,SAAS,GAAG,CAAC,CAAA;QACb,IAAI,GAAG,EAAE,CAAA;IACX,CAAC;IAED,SAAS,eAAe,CAAC,QAAgB,EAAE,WAAmC;QAC5E,IAAI,GAAG,QAAQ,CAAA;QACf,WAAW,CAAC,IAAI,CAAC,CAAA;IACnB,CAAC;IAED,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAA;IAEjD,OAAO,CAAC,WAAW,EAAE,EAAE,CAAC;QACtB,EAAE,CAAC,UAAU,EAAE,CAAC,KAAK,EAAE,EAAE;YACvB,IACE,KAAK,CAAC,aAAa,YAAY,IAAI;gBACnC,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC,EACjD,CAAC;gBACD,OAAM;YACR,CAAC;YAED,cAAc,EAAE,CAAA;QAClB,CAAC,CAAC;QACF,EAAE,CAAC,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE;YACtB,IAAI,KAAK,CAAC,GAAG,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;gBAChF,YAAY,CAAC,SAAS,CAAC,CAAA;gBACvB,eAAe,CAAC,IAAI,GAAG,KAAK,CAAC,GAAG,CAAC,WAAW,EAAE,EAAE,WAAW,CAAC,CAAA;gBAC5D,SAAS,GAAG,MAAM,CAAC,UAAU,CAAC,cAAc,EAAE,wBAAwB,CAAC,CAAA;YACzE,CAAC;iBAAM,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;gBAClC,cAAc,EAAE,CAAA;YAClB,CAAC;iBAAM,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBACxD,YAAY,CAAC,SAAS,CAAC,CAAA;gBACvB,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,WAAW,CAAC,CAAA;gBAC/C,SAAS,GAAG,MAAM,CAAC,UAAU,CAAC,cAAc,EAAE,wBAAwB,CAAC,CAAA;YACzE,CAAC;QACH,CAAC,CAAC;KACH,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,UAAU,qBAAqB,CACnC,IAAU,EACV,IAAY,EACZ,eAA4C;IAE5C,IAAI,MAAM,GAAG,eAAe,CAAC,IAAI,CAAC,CAAA;IAClC,IAAI,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAA;IAC5D,IAAI,cAAc,GAAG,IAAI,CAAC,WAAW,EAAE,CAAA;IAEvC,OAAO,YAAY,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,CAAA;AACrF,CAAC;AAED,MAAM,UAAU,yBAAyB,CACvC,IAAY,EACZ,KAAa,EACb,OAGC;IAED,IAAI,IAAI,KAAK,EAAE,EAAE,CAAC;QAChB,OAAO,IAAI,CAAA;IACb,CAAC;IAED,KAAK,IAAI,MAAM,GAAG,CAAC,EAAE,MAAM,IAAI,KAAK,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,CAAC;QACtD,IAAI,IAAI,GAAG,KAAK,CAAC,CAAC,OAAO,CAAC,SAAS,GAAG,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,CAAA;QAC5E,IAAI,qBAAqB,CAAC,IAAI,EAAE,IAAI,EAAE,OAAO,CAAC,eAAe,CAAC,EAAE,CAAC;YAC/D,OAAO,IAAI,CAAA;QACb,CAAC;IACH,CAAC;IAED,OAAO,IAAI,CAAA;AACb,CAAC"}

package/dist/shared/wait-for-css-transition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wait-for-css-transition.js","sourceRoot":"","sources":["../../src/shared/wait-for-css-transition.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,oBAAoB,CAAC,IAAiB,EAAE,MAAmB,EAAE,MAAmB;IAC9F,OAAO,IAAI,OAAO,CAAO,CAAC,OAAO,EAAE,EAAE;QACnC,IAAI,QAAQ,GAAG,KAAK,CAAA;QACpB,IAAI,gBAAgB,GAAG,KAAK,CAAA;QAC5B,IAAI,YAAY,GAAG,CAAC,CAAA;QACpB,IAAI,aAAa,GAAG,CAAC,CAAA;QAErB,SAAS,OAAO;YACd,oBAAoB,CAAC,YAAY,CAAC,CAAA;YAClC,oBAAoB,CAAC,aAAa,CAAC,CAAA;YACnC,IAAI,CAAC,mBAAmB,CAAC,eAAe,EAAE,mBAAmB,CAAC,CAAA;YAC9D,IAAI,CAAC,mBAAmB,CAAC,eAAe,EAAE,MAAM,CAAC,CAAA;YACjD,IAAI,CAAC,mBAAmB,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAA;YACpD,MAAM,CAAC,mBAAmB,CAAC,OAAO,EAAE,MAAM,CAAC,CAAA;QAC7C,CAAC;QAED,SAAS,mBAAmB,CAAC,KAAsB;YACjD,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,EAAE,CAAC;gBAC1B,OAAM;YACR,CAAC;YAED,gBAAgB,GAAG,IAAI,CAAA;QACzB,CAAC;QAED,SAAS,MAAM,CAAC,KAAa;YAC3B,IAAI,KAAK,YAAY,eAAe,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,EAAE,CAAC;gBAC9D,OAAM;YACR,CAAC;YAED,IAAI,QAAQ,EAAE,CAAC;gBACb,OAAM;YACR,CAAC;YAED,QAAQ,GAAG,IAAI,CAAA;YACf,OAAO,EAAE,CAAA;YACT,OAAO,EAAE,CAAA;QACX,CAAC;QAED,IAAI,CAAC,gBAAgB,CAAC,eAAe,EAAE,mBAAmB,CAAC,CAAA;QAC3D,IAAI,CAAC,gBAAgB,CAAC,eAAe,EAAE,MAAM,CAAC,CAAA;QAC9C,IAAI,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAA;QACjD,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAA;QAExD,IAAI,MAAM,EAAE,CAAC;YACX,IAAI,CAAC;gBACH,MAAM,EAAE,CAAA;YACV,CAAC;YAAC,OAAO,KAAK,EAAE,CAAC;gBACf,OAAO,EAAE,CAAA;gBACT,MAAM,KAAK,CAAA;YACb,CAAC;QACH,CAAC;QAED,IAAI,MAAM,CAAC,OAAO,EAAE,CAAC;YACnB,MAAM,EAAE,CAAA;YACR,OAAM;QACR,CAAC;QAED,YAAY,GAAG,qBAAqB,CAAC,GAAG,EAAE;YACxC,aAAa,GAAG,qBAAqB,CAAC,GAAG,EAAE;gBACzC,IAAI,CAAC,gBAAgB,EAAE,CAAC;oBACtB,MAAM,EAAE,CAAA;gBACV,CAAC;YACH,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;AACJ,CAAC"}

package/dist/shared/wait.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wait.js","sourceRoot":"","sources":["../../src/shared/wait.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,IAAI,CAAC,EAAU;IAC7B,OAAO,IAAI,OAAO,CAAO,CAAC,OAAO,EAAE,EAAE;QACnC,UAAU,CAAC,OAAO,EAAE,EAAE,CAAC,CAAA;IACzB,CAAC,CAAC,CAAA;AACJ,CAAC"}

package/dist/tabs/index.d.ts

@@ -0,0 +1,32 @@
+import { type CSSMixinDescriptor, type Handle, type Props, type RemixNode } from '@remix-run/ui';
+export { TabsChangeEvent, onTabsChange } from '@remix-run/ui/tabs/primitives';
+export type TabsSize = 'md' | 'lg';
+export interface TabsProps extends Omit<Props<'div'>, 'children'> {
+    activeTab?: string;
+    children?: RemixNode;
+    defaultActiveTab?: string;
+    disabled?: boolean;
+    onActiveTabChange?: (activeTab: string) => void;
+    size?: TabsSize;
+}
+export interface TabListProps extends Omit<Props<'div'>, 'children'> {
+    children?: RemixNode;
+}
+export interface TabProps extends Omit<Props<'button'>, 'children' | 'type'> {
+    children?: RemixNode;
+    disabled?: boolean;
+    name: string;
+    type?: 'button' | 'submit' | 'reset';
+}
+export interface TabPanelProps extends Omit<Props<'div'>, 'children'> {
+    children?: RemixNode;
+    name: string;
+}
+export declare const rootStyle: CSSMixinDescriptor;
+export declare const listStyle: CSSMixinDescriptor;
+export declare const tabStyle: CSSMixinDescriptor;
+export declare const panelStyle: CSSMixinDescriptor;
+export declare function Tabs(handle: Handle<TabsProps>): () => RemixNode;
+export declare function TabList(handle: Handle<TabListProps>): () => RemixNode;
+export declare function Tab(handle: Handle<TabProps>): () => RemixNode;
+export declare function TabPanel(handle: Handle<TabPanelProps>): () => RemixNode;

package/dist/tabs/index.js

@@ -0,0 +1,157 @@
+import { jsx as _jsx } from "@remix-run/ui/jsx-runtime";
+import { css, } from '@remix-run/ui';
+import * as tabs from '@remix-run/ui/tabs/primitives';
+export { TabsChangeEvent, onTabsChange } from '@remix-run/ui/tabs/primitives';
+const tabSliderBackground = 'linear-gradient(180deg, rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.04) 100%), #FFFFFF';
+const tabSliderShadow = '0 0 0 0.5px rgba(0, 0, 0, 0.06), 0 1px 1px -0.5px rgba(0, 0, 0, 0.12), 0 2px 2px -1px rgba(0, 0, 0, 0.12), 0 4px 4px -2px rgba(0, 0, 0, 0.12), inset 0 0 2px 1px #FFFFFF';
+const tabsRootCss = css({
+    '--rmx-tabs-height': '32px',
+    '--rmx-tabs-track-padding': '2px',
+    '--rmx-tabs-tab-padding-inline': '12px',
+    '--rmx-tabs-tab-shadow': '0 0 0 0 rgba(0, 0, 0, 0)',
+    '--rmx-tabs-tab-font-size': '12px',
+    '--rmx-tabs-tab-line-height': '17px',
+    '--rmx-tabs-gap': '12px',
+    boxSizing: 'border-box',
+    display: 'grid',
+    gap: 'var(--rmx-tabs-gap)',
+    minWidth: 0,
+});
+const tabsListCss = css({
+    boxSizing: 'border-box',
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: '2px',
+    width: 'max-content',
+    maxWidth: '100%',
+    minHeight: 'var(--rmx-tabs-height)',
+    padding: 'var(--rmx-tabs-track-padding)',
+    border: 0,
+    borderRadius: '9999px',
+    background: 'linear-gradient(180deg, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0) 100%), #EBEBEB',
+    boxShadow: 'inset 0 0 4px 1px rgba(0, 0, 0, 0.08), inset 0 1px 1px rgba(0, 0, 0, 0.02), inset 0 2px 2px rgba(0, 0, 0, 0.02)',
+    overflowX: 'auto',
+    scrollbarWidth: 'none',
+    '&::-webkit-scrollbar': {
+        display: 'none',
+    },
+    '&[aria-disabled="true"]': {
+        opacity: 0.55,
+    },
+});
+const tabsTabCss = css({
+    '--rmx-tabs-tab-focus-shadow': '0 0 0 1px #3573F6, var(--rmx-tabs-tab-shadow), 0 0 0 4px rgba(53, 115, 246, 0.1), 0 6px 32px 4px rgba(53, 115, 246, 0.08), inset 0 0 8px 1px rgba(53, 115, 246, 0.05)',
+    appearance: 'none',
+    margin: 0,
+    boxSizing: 'border-box',
+    position: 'relative',
+    cursor: 'pointer',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row',
+    gap: '4px',
+    width: 'max-content',
+    maxWidth: '100%',
+    minWidth: 0,
+    height: 'calc(var(--rmx-tabs-height) - (var(--rmx-tabs-track-padding) * 2))',
+    minHeight: 'calc(var(--rmx-tabs-height) - (var(--rmx-tabs-track-padding) * 2))',
+    paddingBlock: 0,
+    paddingInline: 'var(--rmx-tabs-tab-padding-inline)',
+    border: 0,
+    borderRadius: '999px',
+    background: 'transparent',
+    boxShadow: 'var(--rmx-tabs-tab-shadow)',
+    color: '#707070',
+    fontFamily: '"Inter Variable", Inter, ui-sans-serif, system-ui, sans-serif',
+    fontStyle: 'normal',
+    fontWeight: 500,
+    fontSize: 'var(--rmx-tabs-tab-font-size)',
+    lineHeight: 'var(--rmx-tabs-tab-line-height)',
+    fontFeatureSettings: '"ss01" on, "cv01" on',
+    letterSpacing: 0,
+    textAlign: 'center',
+    textDecoration: 'none',
+    textShadow: 'none',
+    userSelect: 'none',
+    WebkitUserSelect: 'none',
+    verticalAlign: 'top',
+    whiteSpace: 'nowrap',
+    '&[data-state="inactive"]:hover:not(:disabled):not([aria-disabled="true"])': {
+        background: 'rgba(16, 16, 16, 0.05)',
+        color: '#101010',
+    },
+    '&[data-state="inactive"]:active:not(:disabled):not([aria-disabled="true"])': {
+        background: 'rgba(16, 16, 16, 0.08)',
+    },
+    '&[data-state="active"]': {
+        background: tabSliderBackground,
+        '--rmx-tabs-tab-shadow': tabSliderShadow,
+        color: '#101010',
+        textShadow: '0 1px 0 #FFFFFF',
+    },
+    '&[data-state="active"]:hover:not(:disabled):not([aria-disabled="true"])': {
+        background: tabSliderBackground,
+    },
+    '&[data-state="active"]:active:not(:disabled):not([aria-disabled="true"])': {
+        background: tabSliderBackground,
+    },
+    '&:disabled, &[aria-disabled="true"]': {
+        cursor: 'not-allowed',
+        opacity: 0.55,
+    },
+    '&:focus-visible': {
+        outline: 0,
+        boxShadow: 'var(--rmx-tabs-tab-focus-shadow)',
+    },
+});
+const tabsPanelCss = css({
+    minWidth: 0,
+    color: '#101010',
+    fontFamily: '"Inter Variable", Inter, ui-sans-serif, system-ui, sans-serif',
+    fontSize: '13px',
+    lineHeight: '20px',
+    letterSpacing: 0,
+    '&[hidden]': {
+        display: 'none',
+    },
+});
+const sizeStyles = {
+    md: css({}),
+    lg: css({
+        '--rmx-tabs-height': '36px',
+        '--rmx-tabs-tab-padding-inline': '14px',
+        '--rmx-tabs-tab-font-size': '13px',
+        '--rmx-tabs-tab-line-height': '20px',
+        '--rmx-tabs-gap': '14px',
+    }),
+};
+export const rootStyle = tabsRootCss;
+export const listStyle = tabsListCss;
+export const tabStyle = tabsTabCss;
+export const panelStyle = tabsPanelCss;
+export function Tabs(handle) {
+    return () => {
+        let { activeTab, children, defaultActiveTab, disabled, mix, onActiveTabChange, size = 'md', ...divProps } = handle.props;
+        return (_jsx(tabs.Context, { activeTab: activeTab, defaultActiveTab: defaultActiveTab, disabled: disabled, onActiveTabChange: onActiveTabChange, children: _jsx("div", { ...divProps, mix: [rootStyle, sizeStyles[size], tabs.root(), mix], children: children }) }));
+    };
+}
+export function TabList(handle) {
+    return () => {
+        let { children, mix, ...divProps } = handle.props;
+        return (_jsx("div", { ...divProps, mix: [listStyle, tabs.list(), mix], children: children }));
+    };
+}
+export function Tab(handle) {
+    return () => {
+        let { children, disabled, mix, name, type, ...buttonProps } = handle.props;
+        return (_jsx("button", { ...buttonProps, mix: [tabStyle, tabs.tab({ disabled, name }), mix], type: type ?? 'button', children: children }));
+    };
+}
+export function TabPanel(handle) {
+    return () => {
+        let { children, mix, name, ...divProps } = handle.props;
+        return (_jsx("div", { ...divProps, mix: [panelStyle, tabs.panel({ name }), mix], children: children }));
+    };
+}
+//# sourceMappingURL=index.js.map

package/dist/tabs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/tabs/index.tsx"],"names":[],"mappings":"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"}

package/dist/tabs/primitives.d.ts

@@ -0,0 +1,57 @@
+import { on, type Dispatched, type ElementProps, type Handle, type MixinFactory, type RemixNode } from '@remix-run/ui';
+declare const TABS_CHANGE_EVENT: "rmx:tabs-change";
+type TabsChangeHandler<target extends HTMLElement> = (event: Dispatched<TabsChangeEvent, target>, signal: AbortSignal) => void | Promise<void>;
+export type TabsActivationDirection = 'first' | 'last' | 'next' | 'previous';
+export interface TabsRegisteredTab {
+    disabled: boolean;
+    getTabNode(): HTMLButtonElement | null;
+    name: string;
+}
+export interface TabsContextValue {
+    readonly activeTab: string | null;
+    readonly disabled: boolean;
+    activateTab(name: string): void;
+    activateTabInDirection(name: string, direction: TabsActivationDirection): void;
+    getPanelId(name: string): string;
+    getTabId(name: string): string;
+    isActiveTab(name: string): boolean;
+    registerRoot(node: HTMLElement): void;
+    registerTab(tab: TabsRegisteredTab): void;
+    unregisterRoot(node: HTMLElement): void;
+}
+export interface TabsContextProps {
+    activeTab?: string;
+    children?: RemixNode;
+    defaultActiveTab?: string;
+    disabled?: boolean;
+    onActiveTabChange?: (activeTab: string) => void;
+}
+export interface TabsRootOptions {
+}
+export interface TabListOptions {
+}
+export interface TabOptions {
+    disabled?: boolean;
+    name: string;
+}
+export interface TabPanelOptions {
+    name: string;
+}
+export declare class TabsChangeEvent extends Event {
+    readonly activeTab: string;
+    readonly previousActiveTab: string | null;
+    constructor(activeTab: string, previousActiveTab: string | null);
+}
+declare global {
+    interface HTMLElementEventMap {
+        [TABS_CHANGE_EVENT]: TabsChangeEvent;
+    }
+}
+declare function TabsProvider(handle: Handle<TabsContextProps, TabsContextValue>): () => RemixNode;
+export declare const Context: typeof TabsProvider;
+export declare const list: MixinFactory<HTMLElement, [options?: TabListOptions | undefined], ElementProps>;
+export declare const panel: MixinFactory<HTMLElement, [options: TabPanelOptions], ElementProps>;
+export declare const root: MixinFactory<HTMLElement, [options?: TabsRootOptions | undefined], ElementProps>;
+export declare const tab: MixinFactory<HTMLButtonElement, [options: TabOptions], ElementProps>;
+export declare function onTabsChange<target extends HTMLElement>(handler: TabsChangeHandler<target>, captureBoolean?: boolean): ReturnType<typeof on<target, typeof TABS_CHANGE_EVENT>>;
+export {};

package/dist/tabs/primitives.js

@@ -0,0 +1,238 @@
+import { attrs, createMixin, on, ref, } from '@remix-run/ui';
+const TABS_CHANGE_EVENT = 'rmx:tabs-change';
+export class TabsChangeEvent extends Event {
+    activeTab;
+    previousActiveTab;
+    constructor(activeTab, previousActiveTab) {
+        super(TABS_CHANGE_EVENT, {
+            bubbles: true,
+        });
+        this.activeTab = activeTab;
+        this.previousActiveTab = previousActiveTab;
+    }
+}
+function encodeIdPart(value) {
+    return encodeURIComponent(value).replace(/%/g, '-');
+}
+function getTabState(active) {
+    return active ? 'active' : 'inactive';
+}
+function getTabsContext(handle) {
+    return handle.context.get(TabsProvider);
+}
+function TabsProvider(handle) {
+    let rootNode = null;
+    let renderedTabs = [];
+    let uncontrolledActiveTab = null;
+    let hasInitialized = false;
+    function getActiveTab() {
+        if (handle.props.activeTab !== undefined) {
+            return handle.props.activeTab;
+        }
+        if (!hasInitialized) {
+            uncontrolledActiveTab = handle.props.defaultActiveTab ?? null;
+            hasInitialized = true;
+        }
+        return uncontrolledActiveTab;
+    }
+    function getRegisteredTab(name) {
+        return renderedTabs.find((tab) => tab.name === name);
+    }
+    function dispatchChange(activeTab, previousActiveTab) {
+        rootNode?.dispatchEvent(new TabsChangeEvent(activeTab, previousActiveTab));
+    }
+    function activateTab(name) {
+        if (handle.props.disabled) {
+            return;
+        }
+        let tab = getRegisteredTab(name);
+        if (tab?.disabled) {
+            return;
+        }
+        let previousActiveTab = getActiveTab();
+        if (previousActiveTab === name) {
+            return;
+        }
+        if (handle.props.activeTab === undefined) {
+            uncontrolledActiveTab = name;
+            void handle.update();
+        }
+        handle.props.onActiveTabChange?.(name);
+        dispatchChange(name, previousActiveTab);
+    }
+    function getFocusableTabs() {
+        return renderedTabs.filter((tab) => !tab.disabled && tab.getTabNode() !== null);
+    }
+    function activateTabInDirection(name, direction) {
+        let tabs = getFocusableTabs();
+        if (tabs.length === 0) {
+            return;
+        }
+        let currentIndex = tabs.findIndex((tab) => tab.name === name);
+        let targetIndex = 0;
+        switch (direction) {
+            case 'first':
+                targetIndex = 0;
+                break;
+            case 'last':
+                targetIndex = tabs.length - 1;
+                break;
+            case 'previous':
+                targetIndex = currentIndex <= 0 ? tabs.length - 1 : currentIndex - 1;
+                break;
+            case 'next':
+                targetIndex = currentIndex === -1 || currentIndex === tabs.length - 1 ? 0 : currentIndex + 1;
+                break;
+        }
+        let targetTab = tabs[targetIndex];
+        targetTab?.getTabNode()?.focus();
+        if (targetTab) {
+            activateTab(targetTab.name);
+        }
+    }
+    function getTabId(name) {
+        return `${handle.id}-${encodeIdPart(name)}-tab`;
+    }
+    function getPanelId(name) {
+        return `${handle.id}-${encodeIdPart(name)}-panel`;
+    }
+    function registerTab(tab) {
+        renderedTabs.push(tab);
+        if (handle.props.activeTab === undefined && getActiveTab() === null && !tab.disabled) {
+            uncontrolledActiveTab = tab.name;
+        }
+    }
+    handle.context.set({
+        get activeTab() {
+            return getActiveTab();
+        },
+        get disabled() {
+            return handle.props.disabled ?? false;
+        },
+        activateTab,
+        activateTabInDirection,
+        getPanelId,
+        getTabId,
+        isActiveTab(name) {
+            return getActiveTab() === name;
+        },
+        registerRoot(node) {
+            rootNode = node;
+        },
+        registerTab,
+        unregisterRoot(node) {
+            if (rootNode === node) {
+                rootNode = null;
+            }
+        },
+    });
+    return () => {
+        renderedTabs = [];
+        return handle.props.children;
+    };
+}
+const rootMixin = createMixin((handle) => {
+    let context = getTabsContext(handle);
+    handle.queueTask((node, signal) => {
+        context.registerRoot(node);
+        signal.addEventListener('abort', () => {
+            context.unregisterRoot(node);
+        });
+    });
+    return () => attrs({
+        'data-disabled': context.disabled ? '' : undefined,
+    });
+});
+const listMixin = createMixin((handle) => {
+    let context = getTabsContext(handle);
+    return () => attrs({
+        'aria-disabled': context.disabled ? true : undefined,
+        role: 'tablist',
+    });
+});
+const tabMixin = createMixin((handle, hostType) => {
+    let context = getTabsContext(handle);
+    let tabNode = null;
+    return (options, props) => {
+        let disabled = context.disabled || options.disabled === true || props.disabled === true;
+        context.registerTab({
+            disabled,
+            getTabNode: () => tabNode,
+            name: options.name,
+        });
+        let active = context.isActiveTab(options.name);
+        return [
+            attrs({
+                'aria-controls': context.getPanelId(options.name),
+                'aria-selected': active ? 'true' : 'false',
+                'data-state': getTabState(active),
+                disabled: disabled ? true : undefined,
+                id: context.getTabId(options.name),
+                role: 'tab',
+                tabIndex: active && !disabled ? 0 : -1,
+                type: hostType === 'button' ? 'button' : undefined,
+            }),
+            ref((node, signal) => {
+                tabNode = node;
+                signal.addEventListener('abort', () => {
+                    if (tabNode === node) {
+                        tabNode = null;
+                    }
+                });
+            }),
+            on('click', () => {
+                context.activateTab(options.name);
+            }),
+            on('keydown', (event) => {
+                switch (event.key) {
+                    case 'ArrowDown':
+                    case 'ArrowRight':
+                        event.preventDefault();
+                        context.activateTabInDirection(options.name, 'next');
+                        break;
+                    case 'ArrowUp':
+                    case 'ArrowLeft':
+                        event.preventDefault();
+                        context.activateTabInDirection(options.name, 'previous');
+                        break;
+                    case 'Home':
+                        event.preventDefault();
+                        context.activateTabInDirection(options.name, 'first');
+                        break;
+                    case 'End':
+                        event.preventDefault();
+                        context.activateTabInDirection(options.name, 'last');
+                        break;
+                    case 'Enter':
+                    case ' ':
+                        event.preventDefault();
+                        context.activateTab(options.name);
+                        break;
+                }
+            }),
+        ];
+    };
+});
+const panelMixin = createMixin((handle) => {
+    let context = getTabsContext(handle);
+    return (options) => {
+        let active = context.isActiveTab(options.name);
+        return attrs({
+            'aria-labelledby': context.getTabId(options.name),
+            'data-state': getTabState(active),
+            hidden: active ? undefined : true,
+            id: context.getPanelId(options.name),
+            inert: active ? undefined : true,
+            role: 'tabpanel',
+        });
+    };
+});
+export const Context = TabsProvider;
+export const list = listMixin;
+export const panel = panelMixin;
+export const root = rootMixin;
+export const tab = tabMixin;
+export function onTabsChange(handler, captureBoolean) {
+    return on(TABS_CHANGE_EVENT, handler, captureBoolean);
+}
+//# sourceMappingURL=primitives.js.map

package/dist/tabs/primitives.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"primitives.js","sourceRoot":"","sources":["../../src/tabs/primitives.ts"],"names":[],"mappings":"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"}

package/dist/toggle/index.d.ts

@@ -0,0 +1,9 @@
+import type { CSSMixinDescriptor, ElementProps, MixinDescriptor } from '@remix-run/ui';
+export { ToggleChangeEvent, onToggleChange } from '@remix-run/ui/toggle/primitives';
+export type ToggleSize = 'md' | 'lg';
+export interface ToggleOptions {
+    size?: ToggleSize;
+}
+type ToggleMixin = readonly [MixinDescriptor<Element, [], ElementProps>, CSSMixinDescriptor];
+export declare function toggle(options?: ToggleOptions): ToggleMixin;
+export default toggle;