@react-xp/design-system 1.0.0-beta.0

package/dist/cjs/styles/chips.js

@@ -0,0 +1,98 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getChipParts = void 0;
+// styles/chips.ts
+const tokens_1 = require("../types/tokens");
+const getChipParts = (t, opts = {}) => {
+    const variant = opts.variant ?? 'filled';
+    const selected = Boolean(opts.selected);
+    const disabled = Boolean(opts.disabled);
+    const base = {
+        container: {
+            minHeight: (0, tokens_1.tok)(t, 'tap-target-min'),
+            alignSelf: 'flex-start',
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: (0, tokens_1.tok)(t, 'space-2'),
+            paddingHorizontal: (0, tokens_1.tok)(t, 'space-3'),
+            paddingVertical: (0, tokens_1.tok)(t, 'space-2'),
+            borderRadius: (0, tokens_1.tok)(t, 'radius-full'),
+            borderWidth: (0, tokens_1.tok)(t, 'border-width-default'),
+        },
+        label: {
+            fontFamily: (0, tokens_1.tok)(t, 'typography-font-family-base'),
+            fontSize: (0, tokens_1.tok)(t, 'typography-font-size-2'),
+            fontWeight: (0, tokens_1.tok)(t, 'typography-font-weight-medium'),
+            lineHeight: (0, tokens_1.tok)(t, 'typography-line-height-default'),
+        },
+        leftIcon: {
+            width: (0, tokens_1.tok)(t, 'typography-font-size-4'),
+            height: (0, tokens_1.tok)(t, 'typography-font-size-4'),
+        },
+        rightIcon: {
+            width: (0, tokens_1.tok)(t, 'typography-font-size-4'),
+            height: (0, tokens_1.tok)(t, 'typography-font-size-4'),
+        },
+        focusRing: {
+            outlineStyle: 'solid',
+            outlineWidth: (0, tokens_1.tok)(t, 'border-width-focus'),
+            outlineColor: (0, tokens_1.tok)(t, 'color-focus-ring'),
+            outlineOffset: (0, tokens_1.tok)(t, 'focus-ring-gap'),
+        },
+    };
+    const filled = {
+        backgroundColor: selected
+            ? (0, tokens_1.tok)(t, 'color-action-primary')
+            : (0, tokens_1.tok)(t, 'color-surface-alt'),
+        borderColor: selected
+            ? (0, tokens_1.tok)(t, 'color-action-primary')
+            : (0, tokens_1.tok)(t, 'color-border-subtle'),
+    };
+    const filledLabel = {
+        color: selected
+            ? (0, tokens_1.tok)(t, 'color-action-primary-fg')
+            : (0, tokens_1.tok)(t, 'color-fg-default'),
+    };
+    const outlined = {
+        backgroundColor: 'transparent',
+        borderColor: selected
+            ? (0, tokens_1.tok)(t, 'color-action-primary')
+            : (0, tokens_1.tok)(t, 'color-border-strong'),
+    };
+    const outlinedLabel = {
+        color: selected
+            ? (0, tokens_1.tok)(t, 'color-action-primary')
+            : (0, tokens_1.tok)(t, 'color-fg-default'),
+    };
+    const disabledS = {
+        backgroundColor: (0, tokens_1.tok)(t, 'color-state-disabled-bg'),
+        borderColor: (0, tokens_1.tok)(t, 'color-state-disabled-bg'),
+        opacity: (0, tokens_1.tok)(t, 'opacity-disabled'),
+    };
+    const disabledLabel = { color: (0, tokens_1.tok)(t, 'color-state-disabled-fg') };
+    const interaction = opts.pressed
+        ? { opacity: (0, tokens_1.tok)(t, 'opacity-pressed') }
+        : opts.hovered
+            ? { opacity: 0.96 }
+            : {};
+    return {
+        container: (0, tokens_1.merge)(base.container, variant === 'filled' ? filled : outlined, interaction, disabled && disabledS),
+        label: (0, tokens_1.merge)(base.label, variant === 'filled' ? filledLabel : outlinedLabel, disabled && disabledLabel),
+        leftIcon: (0, tokens_1.merge)(base.leftIcon, {
+            color: (disabled
+                ? disabledLabel.color
+                : variant === 'filled'
+                    ? filledLabel.color
+                    : outlinedLabel.color),
+        }),
+        rightIcon: (0, tokens_1.merge)(base.rightIcon, {
+            color: (disabled
+                ? disabledLabel.color
+                : variant === 'filled'
+                    ? filledLabel.color
+                    : outlinedLabel.color),
+        }),
+        focusRing: (0, tokens_1.merge)(opts.focusVisible ? base.focusRing : undefined),
+    };
+};
+exports.getChipParts = getChipParts;

package/dist/cjs/styles/datePickers.js

@@ -0,0 +1,113 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCalendarDayParts = exports.getDatePickerParts = void 0;
+// styles/datePickers.ts
+const tokens_1 = require("../types/tokens");
+const getDatePickerParts = (t) => {
+    return {
+        container: {
+            backgroundColor: (0, tokens_1.tok)(t, 'color-surface'),
+            borderColor: (0, tokens_1.tok)(t, 'color-border-subtle'),
+            borderWidth: (0, tokens_1.tok)(t, 'border-width-default'),
+            borderRadius: (0, tokens_1.tok)(t, 'radius-4'),
+            shadow: (0, tokens_1.tok)(t, 'shadow-level-2'),
+            padding: (0, tokens_1.tok)(t, 'space-3'),
+        },
+        header: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            paddingBottom: (0, tokens_1.tok)(t, 'space-2'),
+            marginBottom: (0, tokens_1.tok)(t, 'space-2'),
+            borderBottomWidth: (0, tokens_1.tok)(t, 'border-width-default'),
+            borderBottomColor: (0, tokens_1.tok)(t, 'color-border-subtle'),
+        },
+        monthLabel: {
+            color: (0, tokens_1.tok)(t, 'color-fg-default'),
+            fontFamily: (0, tokens_1.tok)(t, 'typography-font-family-heading'),
+            fontSize: (0, tokens_1.tok)(t, 'typography-font-size-3'),
+            fontWeight: (0, tokens_1.tok)(t, 'typography-font-weight-strong'),
+            lineHeight: (0, tokens_1.tok)(t, 'typography-line-height-tight'),
+        },
+        navButton: {
+            minHeight: (0, tokens_1.tok)(t, 'tap-target-min'),
+            minWidth: (0, tokens_1.tok)(t, 'tap-target-min'),
+            borderRadius: (0, tokens_1.tok)(t, 'radius-full'),
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        weekRow: {
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            marginBottom: (0, tokens_1.tok)(t, 'space-2'),
+        },
+        weekdayLabel: {
+            width: (0, tokens_1.tok)(t, 'tap-target-min'),
+            textAlign: 'center',
+            color: (0, tokens_1.tok)(t, 'color-fg-muted'),
+            fontFamily: (0, tokens_1.tok)(t, 'typography-font-family-base'),
+            fontSize: (0, tokens_1.tok)(t, 'typography-font-size-2'),
+            fontWeight: (0, tokens_1.tok)(t, 'typography-font-weight-medium'),
+        },
+        dayCell: {
+            width: (0, tokens_1.tok)(t, 'tap-target-min'),
+            height: (0, tokens_1.tok)(t, 'tap-target-min'),
+            borderRadius: (0, tokens_1.tok)(t, 'radius-full'),
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        dayText: {
+            color: (0, tokens_1.tok)(t, 'color-fg-default'),
+            fontFamily: (0, tokens_1.tok)(t, 'typography-font-family-base'),
+            fontSize: (0, tokens_1.tok)(t, 'typography-font-size-2'),
+            fontWeight: (0, tokens_1.tok)(t, 'typography-font-weight-regular'),
+            lineHeight: (0, tokens_1.tok)(t, 'typography-line-height-default'),
+        },
+        dayFocusRing: {
+            outlineStyle: 'solid',
+            outlineWidth: (0, tokens_1.tok)(t, 'border-width-focus'),
+            outlineColor: (0, tokens_1.tok)(t, 'color-focus-ring'),
+            outlineOffset: (0, tokens_1.tok)(t, 'focus-ring-gap'),
+        },
+        rangeFill: {
+            backgroundColor: (0, tokens_1.tok)(t, 'color-surface-alt'),
+            borderRadius: (0, tokens_1.tok)(t, 'radius-full'),
+        },
+    };
+};
+exports.getDatePickerParts = getDatePickerParts;
+const getCalendarDayParts = (t, s = {}) => {
+    const base = (0, exports.getDatePickerParts)(t);
+    const disabled = {
+        backgroundColor: 'transparent',
+        opacity: (0, tokens_1.tok)(t, 'opacity-disabled'),
+    };
+    const outside = {
+        opacity: 0.5,
+    };
+    const today = {
+        borderWidth: (0, tokens_1.tok)(t, 'border-width-default'),
+        borderColor: (0, tokens_1.tok)(t, 'color-border-strong'),
+    };
+    const selected = {
+        backgroundColor: (0, tokens_1.tok)(t, 'color-action-primary'),
+    };
+    const selectedText = {
+        color: (0, tokens_1.tok)(t, 'color-action-primary-fg'),
+        fontWeight: (0, tokens_1.tok)(t, 'typography-font-weight-strong'),
+    };
+    const inRange = {
+        backgroundColor: (0, tokens_1.tok)(t, 'color-surface-alt'),
+    };
+    const interaction = s.pressed
+        ? { opacity: (0, tokens_1.tok)(t, 'opacity-pressed') }
+        : s.hovered
+            ? { opacity: 0.96 }
+            : {};
+    return {
+        cell: (0, tokens_1.merge)(base.dayCell, s.isInRange && inRange, s.isToday && today, s.isSelected && selected, s.isOutsideMonth && outside, s.isDisabled && disabled, interaction),
+        text: (0, tokens_1.merge)(base.dayText, s.isSelected && selectedText, s.isDisabled && { color: (0, tokens_1.tok)(t, 'color-state-disabled-fg') }),
+        focusRing: (0, tokens_1.merge)(s.focusVisible ? base.dayFocusRing : undefined),
+    };
+};
+exports.getCalendarDayParts = getCalendarDayParts;

package/dist/cjs/styles/dividers.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDividerStyle = void 0;
+// styles/dividers.ts
+const tokens_1 = require("../types/tokens");
+const getDividerStyle = (t, variant = 'subtle') => ({
+    height: (0, tokens_1.tok)(t, 'border-width-default'),
+    backgroundColor: variant === 'strong'
+        ? (0, tokens_1.tok)(t, 'color-border-strong')
+        : (0, tokens_1.tok)(t, 'color-border-subtle'),
+});
+exports.getDividerStyle = getDividerStyle;

package/dist/cjs/styles/emptyStates.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getEmptyStateParts = void 0;
+// styles/emptyStates.ts
+const tokens_1 = require("../types/tokens");
+const getEmptyStateParts = (t) => ({
+    container: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: (0, tokens_1.tok)(t, 'space-6'),
+        gap: (0, tokens_1.tok)(t, 'space-3'),
+    },
+    icon: {
+        width: (0, tokens_1.tok)(t, 'typography-font-size-6'),
+        height: (0, tokens_1.tok)(t, 'typography-font-size-6'),
+        color: (0, tokens_1.tok)(t, 'color-fg-muted'),
+    },
+    title: {
+        color: (0, tokens_1.tok)(t, 'color-fg-default'),
+        fontFamily: (0, tokens_1.tok)(t, 'typography-font-family-heading'),
+        fontSize: (0, tokens_1.tok)(t, 'typography-font-size-5'),
+        fontWeight: (0, tokens_1.tok)(t, 'typography-font-weight-strong'),
+        lineHeight: (0, tokens_1.tok)(t, 'typography-line-height-tight'),
+        textAlign: 'center',
+    },
+    message: {
+        color: (0, tokens_1.tok)(t, 'color-fg-muted'),
+        fontFamily: (0, tokens_1.tok)(t, 'typography-font-family-base'),
+        fontSize: (0, tokens_1.tok)(t, 'typography-font-size-3'),
+        fontWeight: (0, tokens_1.tok)(t, 'typography-font-weight-regular'),
+        lineHeight: (0, tokens_1.tok)(t, 'typography-line-height-default'),
+        textAlign: 'center',
+    },
+    actions: {
+        marginTop: (0, tokens_1.tok)(t, 'space-2'),
+        flexDirection: 'row',
+        gap: (0, tokens_1.tok)(t, 'space-2'),
+    },
+});
+exports.getEmptyStateParts = getEmptyStateParts;

package/dist/cjs/styles/forms.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFormLayout = void 0;
+// styles/forms.ts
+const tokens_1 = require("../types/tokens");
+const getFormLayout = (t) => ({
+    form: {
+        gap: (0, tokens_1.tok)(t, 'space-4'),
+    },
+    field: {
+        gap: (0, tokens_1.tok)(t, 'space-1'),
+    },
+    row: {
+        flexDirection: 'row',
+        gap: (0, tokens_1.tok)(t, 'space-3'),
+    },
+    section: {
+        padding: (0, tokens_1.tok)(t, 'space-4'),
+        backgroundColor: (0, tokens_1.tok)(t, 'color-surface'),
+        borderRadius: (0, tokens_1.tok)(t, 'radius-4'),
+        borderWidth: (0, tokens_1.tok)(t, 'border-width-default'),
+        borderColor: (0, tokens_1.tok)(t, 'color-border-subtle'),
+        gap: (0, tokens_1.tok)(t, 'space-3'),
+    },
+    actions: {
+        marginTop: (0, tokens_1.tok)(t, 'space-2'),
+        flexDirection: 'row',
+        justifyContent: 'flex-end',
+        gap: (0, tokens_1.tok)(t, 'space-2'),
+    },
+});
+exports.getFormLayout = getFormLayout;

package/dist/cjs/styles/headers.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getHeaderParts = void 0;
+// styles/headers.ts
+const tokens_1 = require("../types/tokens");
+const getHeaderParts = (t) => ({
+    container: {
+        minHeight: (0, tokens_1.tok)(t, 'tap-target-min'),
+        paddingHorizontal: (0, tokens_1.tok)(t, 'space-4'),
+        paddingVertical: (0, tokens_1.tok)(t, 'space-3'),
+        backgroundColor: (0, tokens_1.tok)(t, 'color-surface'),
+        borderBottomWidth: (0, tokens_1.tok)(t, 'border-width-default'),
+        borderBottomColor: (0, tokens_1.tok)(t, 'color-border-subtle'),
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        zIndex: (0, tokens_1.tok)(t, 'z-index-layer-navbar'),
+    },
+    left: {
+        minWidth: (0, tokens_1.tok)(t, 'tap-target-min'),
+        alignItems: 'flex-start',
+        justifyContent: 'center',
+    },
+    center: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+    right: {
+        minWidth: (0, tokens_1.tok)(t, 'tap-target-min'),
+        alignItems: 'flex-end',
+        justifyContent: 'center',
+    },
+    title: {
+        color: (0, tokens_1.tok)(t, 'color-fg-default'),
+        fontFamily: (0, tokens_1.tok)(t, 'typography-font-family-heading'),
+        fontSize: (0, tokens_1.tok)(t, 'typography-font-size-4'),
+        fontWeight: (0, tokens_1.tok)(t, 'typography-font-weight-strong'),
+        lineHeight: (0, tokens_1.tok)(t, 'typography-line-height-tight'),
+    },
+    subtitle: {
+        marginTop: (0, tokens_1.tok)(t, 'space-1'),
+        color: (0, tokens_1.tok)(t, 'color-fg-muted'),
+        fontFamily: (0, tokens_1.tok)(t, 'typography-font-family-base'),
+        fontSize: (0, tokens_1.tok)(t, 'typography-font-size-2'),
+        fontWeight: (0, tokens_1.tok)(t, 'typography-font-weight-regular'),
+        lineHeight: (0, tokens_1.tok)(t, 'typography-line-height-default'),
+    },
+});
+exports.getHeaderParts = getHeaderParts;

package/dist/cjs/styles/index.js

@@ -0,0 +1,43 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./avatars"), exports);
+__exportStar(require("./badges"), exports);
+__exportStar(require("./bottomSheets"), exports);
+__exportStar(require("./buttons"), exports);
+__exportStar(require("./cards"), exports);
+__exportStar(require("./checkboxes"), exports);
+__exportStar(require("./chips"), exports);
+__exportStar(require("./datePickers"), exports);
+__exportStar(require("./dividers"), exports);
+__exportStar(require("./emptyStates"), exports);
+__exportStar(require("./forms"), exports);
+__exportStar(require("./headers"), exports);
+__exportStar(require("./inputs"), exports);
+__exportStar(require("./listItems"), exports);
+__exportStar(require("./modals"), exports);
+__exportStar(require("./pagination"), exports);
+__exportStar(require("./popovers"), exports);
+__exportStar(require("./progress"), exports);
+__exportStar(require("./radios"), exports);
+__exportStar(require("./selects"), exports);
+__exportStar(require("./skeletons"), exports);
+__exportStar(require("./steppers"), exports);
+__exportStar(require("./switches"), exports);
+__exportStar(require("./tables"), exports);
+__exportStar(require("./tabs"), exports);
+__exportStar(require("./toasts"), exports);
+__exportStar(require("./tooltips"), exports);

package/dist/cjs/styles/inputs.js

@@ -0,0 +1,101 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getInputParts = void 0;
+// styles/inputs.ts
+const tokens_1 = require("../types/tokens");
+const sizeStyles = (t) => ({
+    sm: {
+        fieldWrapper: {
+            minHeight: (0, tokens_1.tok)(t, 'tap-target-min'),
+            paddingHorizontal: (0, tokens_1.tok)(t, 'space-3'),
+            paddingVertical: (0, tokens_1.tok)(t, 'space-2'),
+        },
+        inputText: { fontSize: (0, tokens_1.tok)(t, 'typography-font-size-2') },
+    },
+    md: {
+        fieldWrapper: {
+            minHeight: (0, tokens_1.tok)(t, 'tap-target-min'),
+            paddingHorizontal: (0, tokens_1.tok)(t, 'space-4'),
+            paddingVertical: (0, tokens_1.tok)(t, 'space-2'),
+        },
+        inputText: { fontSize: (0, tokens_1.tok)(t, 'typography-font-size-3') },
+    },
+    lg: {
+        fieldWrapper: {
+            minHeight: (0, tokens_1.tok)(t, 'tap-target-min'),
+            paddingHorizontal: (0, tokens_1.tok)(t, 'space-5'),
+            paddingVertical: (0, tokens_1.tok)(t, 'space-3'),
+        },
+        inputText: { fontSize: (0, tokens_1.tok)(t, 'typography-font-size-4') },
+    },
+});
+const getInputParts = (t, opts = {}) => {
+    const size = opts.size ?? 'md';
+    const isDisabled = Boolean(opts.disabled);
+    const isError = Boolean(opts.error);
+    const isFocused = Boolean(opts.focused);
+    const s = sizeStyles(t)[size];
+    const base = {
+        label: {
+            marginBottom: (0, tokens_1.tok)(t, 'space-1'),
+            color: (0, tokens_1.tok)(t, 'color-fg-muted'),
+            fontFamily: (0, tokens_1.tok)(t, 'typography-font-family-base'),
+            fontSize: (0, tokens_1.tok)(t, 'typography-font-size-2'),
+            fontWeight: (0, tokens_1.tok)(t, 'typography-font-weight-medium'),
+            lineHeight: (0, tokens_1.tok)(t, 'typography-line-height-default'),
+        },
+        fieldWrapper: (0, tokens_1.merge)({
+            backgroundColor: (0, tokens_1.tok)(t, 'color-input-bg'),
+            borderColor: (0, tokens_1.tok)(t, 'color-input-border'),
+            borderWidth: (0, tokens_1.tok)(t, 'border-width-default'),
+            borderRadius: (0, tokens_1.tok)(t, 'radius-2'),
+            justifyContent: 'center',
+        }, s.fieldWrapper),
+        inputText: (0, tokens_1.merge)({
+            color: (0, tokens_1.tok)(t, 'color-fg-default'),
+            fontFamily: (0, tokens_1.tok)(t, 'typography-font-family-base'),
+            lineHeight: (0, tokens_1.tok)(t, 'typography-line-height-default'),
+        }, s.inputText),
+        placeholder: {
+            color: (0, tokens_1.tok)(t, 'color-input-placeholder'),
+        },
+        helper: {
+            marginTop: (0, tokens_1.tok)(t, 'space-1'),
+            color: (0, tokens_1.tok)(t, 'color-fg-subtle'),
+            fontFamily: (0, tokens_1.tok)(t, 'typography-font-family-base'),
+            fontSize: (0, tokens_1.tok)(t, 'typography-font-size-1'),
+            lineHeight: (0, tokens_1.tok)(t, 'typography-line-height-default'),
+        },
+        focusRing: {
+            outlineStyle: 'solid',
+            outlineWidth: (0, tokens_1.tok)(t, 'border-width-focus'),
+            outlineColor: (0, tokens_1.tok)(t, 'color-focus-ring'),
+            outlineOffset: (0, tokens_1.tok)(t, 'focus-ring-gap'),
+        },
+    };
+    const focused = {
+        fieldWrapper: { borderColor: (0, tokens_1.tok)(t, 'color-input-border-focus') },
+    };
+    const error = {
+        fieldWrapper: { borderColor: (0, tokens_1.tok)(t, 'color-status-error') },
+        helper: { color: (0, tokens_1.tok)(t, 'color-status-error') },
+    };
+    const disabled = {
+        fieldWrapper: {
+            backgroundColor: (0, tokens_1.tok)(t, 'color-state-disabled-bg'),
+            borderColor: (0, tokens_1.tok)(t, 'color-state-disabled-bg'),
+        },
+        label: { color: (0, tokens_1.tok)(t, 'color-state-disabled-fg') },
+        inputText: { color: (0, tokens_1.tok)(t, 'color-state-disabled-fg') },
+        helper: { color: (0, tokens_1.tok)(t, 'color-state-disabled-fg') },
+    };
+    return {
+        label: (0, tokens_1.merge)(base.label, isDisabled && disabled.label),
+        fieldWrapper: (0, tokens_1.merge)(base.fieldWrapper, isFocused && focused.fieldWrapper, isError && error.fieldWrapper, isDisabled && disabled.fieldWrapper),
+        inputText: (0, tokens_1.merge)(base.inputText, isDisabled && disabled.inputText),
+        placeholder: (0, tokens_1.merge)(base.placeholder),
+        helper: (0, tokens_1.merge)(base.helper, isError && error.helper, isDisabled && disabled.helper),
+        focusRing: (0, tokens_1.merge)(isFocused ? base.focusRing : undefined),
+    };
+};
+exports.getInputParts = getInputParts;

package/dist/cjs/styles/listItems.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getListItemParts = void 0;
+// styles/listItems.ts
+const tokens_1 = require("../types/tokens");
+const getListItemParts = (t, s = {}) => {
+    const disabled = Boolean(s.disabled);
+    const base = {
+        container: {
+            minHeight: (0, tokens_1.tok)(t, 'tap-target-min'),
+            paddingVertical: (0, tokens_1.tok)(t, 'space-2'),
+            paddingHorizontal: (0, tokens_1.tok)(t, 'space-4'),
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: (0, tokens_1.tok)(t, 'space-3'),
+            borderRadius: (0, tokens_1.tok)(t, 'radius-3'),
+        },
+        left: {
+            width: (0, tokens_1.tok)(t, 'tap-target-min'),
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        content: { flex: 1, gap: (0, tokens_1.tok)(t, 'space-1') },
+        right: {
+            minWidth: (0, tokens_1.tok)(t, 'tap-target-min'),
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        title: {
+            color: (0, tokens_1.tok)(t, 'color-fg-default'),
+            fontFamily: (0, tokens_1.tok)(t, 'typography-font-family-base'),
+            fontSize: (0, tokens_1.tok)(t, 'typography-font-size-3'),
+            fontWeight: (0, tokens_1.tok)(t, 'typography-font-weight-medium'),
+            lineHeight: (0, tokens_1.tok)(t, 'typography-line-height-default'),
+        },
+        subtitle: {
+            color: (0, tokens_1.tok)(t, 'color-fg-muted'),
+            fontFamily: (0, tokens_1.tok)(t, 'typography-font-family-base'),
+            fontSize: (0, tokens_1.tok)(t, 'typography-font-size-2'),
+            fontWeight: (0, tokens_1.tok)(t, 'typography-font-weight-regular'),
+            lineHeight: (0, tokens_1.tok)(t, 'typography-line-height-default'),
+        },
+        focusRing: {
+            outlineStyle: 'solid',
+            outlineWidth: (0, tokens_1.tok)(t, 'border-width-focus'),
+            outlineColor: (0, tokens_1.tok)(t, 'color-focus-ring'),
+            outlineOffset: (0, tokens_1.tok)(t, 'focus-ring-gap'),
+        },
+    };
+    const selected = { backgroundColor: (0, tokens_1.tok)(t, 'color-surface-alt') };
+    const hover = { backgroundColor: (0, tokens_1.tok)(t, 'color-bg-subtle') };
+    const pressed = { opacity: (0, tokens_1.tok)(t, 'opacity-pressed') };
+    const disabledS = { opacity: (0, tokens_1.tok)(t, 'opacity-disabled') };
+    const disabledText = { color: (0, tokens_1.tok)(t, 'color-state-disabled-fg') };
+    return {
+        container: (0, tokens_1.merge)(base.container, s.selected && selected, s.hovered && hover, s.pressed && pressed, disabled && disabledS),
+        left: base.left,
+        content: base.content,
+        right: base.right,
+        title: (0, tokens_1.merge)(base.title, disabled && disabledText),
+        subtitle: (0, tokens_1.merge)(base.subtitle, disabled && disabledText),
+        focusRing: (0, tokens_1.merge)(s.focusVisible ? base.focusRing : undefined),
+    };
+};
+exports.getListItemParts = getListItemParts;

package/dist/cjs/styles/modals.js

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getModalParts = void 0;
+// styles/modals.ts
+const tokens_1 = require("../types/tokens");
+const getModalParts = (t, opts) => {
+    const enter = (0, tokens_1.motion)(t, 'motion-emphasis-enter');
+    const exit = (0, tokens_1.motion)(t, 'motion-emphasis-exit');
+    const base = {
+        backdrop: {
+            position: 'absolute',
+            inset: 0,
+            backgroundColor: (0, tokens_1.tok)(t, 'color-overlay-backdrop'),
+            zIndex: (0, tokens_1.tok)(t, 'z-index-layer-overlay'),
+        },
+        container: {
+            position: 'absolute',
+            inset: 0,
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: (0, tokens_1.tok)(t, 'space-4'),
+            zIndex: (0, tokens_1.tok)(t, 'z-index-layer-modal'),
+        },
+        surface: {
+            width: '100%',
+            backgroundColor: (0, tokens_1.tok)(t, 'color-surface'),
+            borderRadius: (0, tokens_1.tok)(t, 'radius-4'),
+            borderWidth: (0, tokens_1.tok)(t, 'border-width-default'),
+            borderColor: (0, tokens_1.tok)(t, 'color-border-subtle'),
+            shadow: (0, tokens_1.tok)(t, 'shadow-level-4'),
+            overflow: 'hidden',
+            // semântico (runtime aplica animação)
+            animationEnterDurationMs: enter.durationMs,
+            animationEnterEasing: enter.easing,
+            animationExitDurationMs: exit.durationMs,
+            animationExitEasing: exit.easing,
+        },
+        header: {
+            paddingHorizontal: (0, tokens_1.tok)(t, 'space-4'),
+            paddingTop: (0, tokens_1.tok)(t, 'space-4'),
+            paddingBottom: (0, tokens_1.tok)(t, 'space-2'),
+            borderBottomWidth: (0, tokens_1.tok)(t, 'border-width-default'),
+            borderBottomColor: (0, tokens_1.tok)(t, 'color-border-subtle'),
+        },
+        body: {
+            paddingHorizontal: (0, tokens_1.tok)(t, 'space-4'),
+            paddingVertical: (0, tokens_1.tok)(t, 'space-3'),
+        },
+        footer: {
+            paddingHorizontal: (0, tokens_1.tok)(t, 'space-4'),
+            paddingTop: (0, tokens_1.tok)(t, 'space-2'),
+            paddingBottom: (0, tokens_1.tok)(t, 'space-4'),
+            borderTopWidth: (0, tokens_1.tok)(t, 'border-width-default'),
+            borderTopColor: (0, tokens_1.tok)(t, 'color-border-subtle'),
+            flexDirection: 'row',
+            justifyContent: 'flex-end',
+            gap: (0, tokens_1.tok)(t, 'space-2'),
+        },
+        title: {
+            color: (0, tokens_1.tok)(t, 'color-fg-default'),
+            fontFamily: (0, tokens_1.tok)(t, 'typography-font-family-heading'),
+            fontSize: (0, tokens_1.tok)(t, 'typography-font-size-5'),
+            fontWeight: (0, tokens_1.tok)(t, 'typography-font-weight-strong'),
+            lineHeight: (0, tokens_1.tok)(t, 'typography-line-height-tight'),
+        },
+        subtitle: {
+            marginTop: (0, tokens_1.tok)(t, 'space-1'),
+            color: (0, tokens_1.tok)(t, 'color-fg-muted'),
+            fontFamily: (0, tokens_1.tok)(t, 'typography-font-family-base'),
+            fontSize: (0, tokens_1.tok)(t, 'typography-font-size-3'),
+            fontWeight: (0, tokens_1.tok)(t, 'typography-font-weight-regular'),
+            lineHeight: (0, tokens_1.tok)(t, 'typography-line-height-default'),
+        },
+    };
+    if (!opts?.dense)
+        return base;
+    return {
+        ...base,
+        header: (0, tokens_1.merge)(base.header, {
+            paddingHorizontal: (0, tokens_1.tok)(t, 'space-3'),
+            paddingTop: (0, tokens_1.tok)(t, 'space-3'),
+        }),
+        body: (0, tokens_1.merge)(base.body, {
+            paddingHorizontal: (0, tokens_1.tok)(t, 'space-3'),
+        }),
+        footer: (0, tokens_1.merge)(base.footer, {
+            paddingHorizontal: (0, tokens_1.tok)(t, 'space-3'),
+            paddingBottom: (0, tokens_1.tok)(t, 'space-3'),
+        }),
+    };
+};
+exports.getModalParts = getModalParts;