paris 0.23.0 → 0.24.0

package/dist/stories/cardbutton/CardButton.d.ts

@@ -0,0 +1,50 @@
+import { ButtonProps as AriaButtonProps } from '@ariakit/react';
+import { FC, HTMLAttributeAnchorTarget, MouseEventHandler, ReactNode } from 'react';
+export type CardButtonProps = {
+    /**
+     * The visual variant of the CardButton. `raised` is the default variant with a drop shadow, `surface` is a variant with a border and overlay, `flat` is a variant with a border.
+     *
+     * @default "raised"
+     */
+    kind?: 'raised' | 'surface' | 'flat';
+    /**
+     * The status of the CardButton. `pending` adds a dashed border.
+     *
+     * @default "default"
+     */
+    status?: 'default' | 'pending';
+    /**
+     * Disables the Button, disallowing user interaction.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The interaction handler for the Button.
+     */
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Optionally, the Button can be rendered as an anchor element by passing an `href` prop. To use a Next.js Link component, use the `render` prop directly.
+     */
+    href?: string;
+    /**
+     * Optionally, the target of the anchor element can be specified (defaults to `_self`).
+     */
+    hreftarget?: HTMLAttributeAnchorTarget;
+    /**
+     * The contents of the Button.
+     */
+    children?: ReactNode | ReactNode[];
+} & Omit<AriaButtonProps, 'children' | 'disabled' | 'onClick'>;
+/**
+ * A CardButton component.
+ *
+ * <hr />
+ *
+ * To use this component, import it as follows:
+ *
+ * ```js
+ * import { CardButton } from 'paris/cardbutton';
+ * ```
+ * @constructor
+ */
+export declare const CardButton: FC<CardButtonProps>;

package/dist/stories/cardbutton/CardButton.js

@@ -0,0 +1,53 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { Button } from '@ariakit/react';
+import { clsx } from 'clsx';
+import { TextWhenString } from '../utility/TextWhenString.js';
+import styles from './CardButton.module.scss.js';
+
+const CardButton = ({
+  kind = "raised",
+  status = "default",
+  type = "button",
+  onClick,
+  children,
+  disabled,
+  href,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: styles.container, children: /* @__PURE__ */ jsx(
+  Button,
+  {
+    ...props,
+    className: clsx(
+      styles.card,
+      styles[kind],
+      styles[status],
+      typeof children === "string" && styles.text,
+      props?.className
+    ),
+    "aria-disabled": disabled ?? false,
+    type,
+    "aria-details": typeof children === "string" ? children : void 0,
+    onClick: !disabled && !href ? onClick : () => {
+    },
+    disabled: false,
+    ...href ? {
+      render: (properties) => (
+        // eslint-disable-next-line jsx-a11y/anchor-has-content
+        /* @__PURE__ */ jsx(
+          "a",
+          {
+            ...properties,
+            href,
+            target: props.hreftarget ?? "_self",
+            rel: props.hreftarget === "_self" ? void 0 : "noreferrer"
+          }
+        )
+      )
+    } : {},
+    children: /* @__PURE__ */ jsx(TextWhenString, { kind: "paragraphMedium", children })
+  }
+) });
+
+export { CardButton };
+//# sourceMappingURL=CardButton.js.map

package/dist/stories/cardbutton/CardButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardButton.js","sources":["../../../src/stories/cardbutton/CardButton.tsx"],"sourcesContent":["'use client';\n\nimport type { ButtonProps as AriaButtonProps } from '@ariakit/react';\nimport { Button as AriaButton } from '@ariakit/react';\nimport { clsx } from 'clsx';\nimport type { FC, HTMLAttributeAnchorTarget, MouseEventHandler, ReactNode } from 'react';\nimport { TextWhenString } from '../utility';\nimport styles from './CardButton.module.scss';\n\nexport type CardButtonProps = {\n    /**\n     * The visual variant of the CardButton. `raised` is the default variant with a drop shadow, `surface` is a variant with a border and overlay, `flat` is a variant with a border.\n     *\n     * @default \"raised\"\n     */\n    kind?: 'raised' | 'surface' | 'flat';\n    /**\n     * The status of the CardButton. `pending` adds a dashed border.\n     *\n     * @default \"default\"\n     */\n    status?: 'default' | 'pending';\n    /**\n     * Disables the Button, disallowing user interaction.\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * The interaction handler for the Button.\n     */\n    onClick?: MouseEventHandler<HTMLButtonElement>;\n    /**\n     * Optionally, the Button can be rendered as an anchor element by passing an `href` prop. To use a Next.js Link component, use the `render` prop directly.\n     */\n    href?: string;\n    /**\n     * Optionally, the target of the anchor element can be specified (defaults to `_self`).\n     */\n    hreftarget?: HTMLAttributeAnchorTarget;\n    /**\n     * The contents of the Button.\n     */\n    children?: ReactNode | ReactNode[];\n} & Omit<AriaButtonProps, 'children' | 'disabled' | 'onClick'>;\n\n/**\n * A CardButton component.\n *\n * <hr />\n *\n * To use this component, import it as follows:\n *\n * ```js\n * import { CardButton } from 'paris/cardbutton';\n * ```\n * @constructor\n */\nexport const CardButton: FC<CardButtonProps> = ({\n    kind = 'raised',\n    status = 'default',\n    type = 'button',\n    onClick,\n    children,\n    disabled,\n    href,\n    ...props\n}) => (\n    <div className={styles.container}>\n        <AriaButton\n            {...props}\n            className={clsx(\n                styles.card,\n                styles[kind],\n                styles[status],\n                typeof children === 'string' && styles.text,\n                props?.className,\n            )}\n            aria-disabled={disabled ?? false}\n            type={type}\n            aria-details={typeof children === 'string' ? children : undefined}\n            onClick={!disabled && !href ? onClick : () => {}}\n            disabled={false}\n            {...(href\n                ? {\n                      render: (properties) => (\n                          // eslint-disable-next-line jsx-a11y/anchor-has-content\n                          <a\n                              {...properties}\n                              href={href}\n                              target={props.hreftarget ?? '_self'}\n                              rel={props.hreftarget === '_self' ? undefined : 'noreferrer'}\n                          />\n                      ),\n                  }\n                : {})}\n        >\n            <TextWhenString kind=\"paragraphMedium\">{children}</TextWhenString>\n        </AriaButton>\n    </div>\n);\n"],"names":["AriaButton"],"mappings":"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"}

package/dist/stories/cardbutton/CardButton.module.css

@@ -0,0 +1,77 @@
+.paris_container_yNfv5 {
+  user-select: var(--pte-utils-defaultUserSelect);
+  width: auto;
+}
+
+.paris_card_ORTWc {
+  padding: 10px 12px;
+  transition: var(--pte-animations-interaction);
+  width: 100%;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+.paris_card_ORTWc[aria-disabled=true] {
+  pointer-events: none;
+}
+.paris_card_ORTWc[aria-disabled=true].paris_text_JEY3p {
+  color: var(--pte-new-colors-contentDisabled);
+}
+
+.paris_raised_GtoCs {
+  border-radius: var(--pte-borders-radius-rounded);
+  background-color: var(--pte-new-colors-surfacePrimary);
+  box-shadow: var(--pte-new-lighting-subtlePopup);
+  border: 1px solid var(--pte-new-colors-surfacePrimary);
+}
+.paris_raised_GtoCs:hover {
+  background-color: var(--pte-new-colors-overlayStrong);
+  cursor: default;
+}
+.paris_raised_GtoCs[aria-disabled=false]:active {
+  background-color: var(--pte-new-colors-overlayMedium);
+  transform: scale(0.996);
+}
+.paris_raised_GtoCs.paris_pending_EQ66S {
+  border: 1px dashed var(--pte-new-colors-borderMedium);
+  background-color: var(--pte-new-colors-surfaceSecondary);
+}
+
+.paris_surface_I-11f {
+  border-radius: var(--pte-new-borders-radius-roundedMedium);
+  border: 1px solid var(--pte-new-colors-borderMedium);
+  background-color: var(--pte-new-colors-overlaySubtle);
+}
+.paris_surface_I-11f:hover {
+  background-color: var(--pte-new-colors-overlayStrong);
+  cursor: default;
+}
+.paris_surface_I-11f[aria-disabled=false]:active {
+  background-color: var(--pte-new-colors-overlayMedium);
+  transform: scale(0.996);
+}
+.paris_surface_I-11f.paris_pending_EQ66S {
+  border: 1px dashed var(--pte-new-colors-borderMedium);
+  background-color: transparent;
+}
+
+.paris_flat_5RSE5 {
+  border-radius: var(--pte-new-borders-radius-roundedMedium);
+  border: 1px solid var(--pte-new-colors-borderStrong);
+  background: var(--pte-new-colors-overlayWhiteSubtle);
+}
+.paris_flat_5RSE5:hover {
+  background-color: var(--pte-new-colors-overlayStrong);
+  cursor: default;
+}
+.paris_flat_5RSE5[aria-disabled=false]:active {
+  background-color: var(--pte-new-colors-overlayMedium);
+  transform: scale(0.996);
+}
+.paris_flat_5RSE5.paris_pending_EQ66S {
+  border: 1px dashed var(--pte-new-colors-borderStrong);
+}
+
+.paris_text_JEY3p {
+  color: var(--pte-new-colors-contentPrimary);
+}

package/dist/stories/cardbutton/CardButton.module.scss.js

@@ -0,0 +1,19 @@
+import './CardButton.module.css';const container = "paris_container_yNfv5";
+const card = "paris_card_ORTWc";
+const text = "paris_text_JEY3p";
+const raised = "paris_raised_GtoCs";
+const pending = "paris_pending_EQ66S";
+const surface = "paris_surface_I-11f";
+const flat = "paris_flat_5RSE5";
+const styles = {
+	container: container,
+	card: card,
+	text: text,
+	raised: raised,
+	pending: pending,
+	surface: surface,
+	flat: flat
+};
+
+export { card, container, styles as default, flat, pending, raised, surface, text };
+//# sourceMappingURL=CardButton.module.scss.js.map

package/dist/stories/cardbutton/CardButton.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardButton.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}

package/dist/stories/cardbutton/index.js

@@ -0,0 +1,2 @@
+export { CardButton } from './CardButton.js';
+//# sourceMappingURL=index.js.map

package/dist/stories/cardbutton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/stories/checkbox/Checkbox.d.ts

@@ -0,0 +1,31 @@
+import { FC, ReactNode } from 'react';
+export type CheckboxProps = {
+    /** The visual style of the Checkbox. `default` is a standard checkbox with a label next to it, `surface` is a clickable card that displays a check when selected, `panel` is a clickable card with the checkbox aligned right, `switch` is a switch toggle.  */
+    kind?: 'default' | 'surface' | 'panel' | 'switch';
+    checked?: boolean;
+    onChange?: (checked: boolean | 'indeterminate') => void;
+    disabled?: boolean;
+    /**
+     * Whether to hide the label text of the Checkbox. Does not apply to `kind="surface"` because there would be nothing visible.
+     *
+     * @default false
+     */
+    hideLabel?: boolean;
+    /** The initial checked state for uncontrolled mode. If `checked` is provided, this is ignored. */
+    defaultChecked?: boolean;
+    /** The contents of the Checkbox. */
+    children?: ReactNode | ReactNode[];
+} & Omit<React.ComponentPropsWithoutRef<'label'>, 'onChange' | 'children'>;
+/**
+ * A Checkbox component.
+ *
+ * <hr />
+ *
+ * To use this component, import it as follows:
+ *
+ * ```js
+ * import { Checkbox } from 'paris/checkbox';
+ * ```
+ * @constructor
+ */
+export declare const Checkbox: FC<CheckboxProps>;

package/dist/stories/checkbox/Checkbox.js

@@ -0,0 +1,99 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Switch } from '@headlessui/react';
+import * as RadixCheckbox from '@radix-ui/react-checkbox';
+import { clsx } from 'clsx';
+import { useId } from 'react';
+import { useControllableState } from '../../helpers/useControllableState.js';
+import { Check } from '../icon/Check.js';
+import { Icon } from '../icon/Icon.js';
+import { TextWhenString } from '../utility/TextWhenString.js';
+import { VisuallyHidden } from '../utility/VisuallyHidden.js';
+import styles from './Checkbox.module.scss.js';
+
+const Checkbox = ({
+  kind = "default",
+  checked,
+  defaultChecked,
+  onChange,
+  disabled,
+  hideLabel = false,
+  children,
+  className,
+  ...props
+}) => {
+  const inputID = useId();
+  const [resolvedChecked, setResolvedChecked] = useControllableState({
+    value: checked,
+    defaultValue: defaultChecked,
+    onChange
+  });
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      htmlFor: inputID,
+      className: clsx(
+        styles.container,
+        disabled && styles.disabled,
+        className,
+        resolvedChecked && styles.checked
+      ),
+      ...props,
+      children: [
+        (kind === "default" || kind === "surface" || kind === "panel") && /* @__PURE__ */ jsxs(
+          RadixCheckbox.Root,
+          {
+            id: inputID,
+            className: clsx(styles.root, styles[kind]),
+            checked: resolvedChecked,
+            onCheckedChange: (v) => setResolvedChecked(!!v),
+            "data-disabled": disabled,
+            "aria-details": typeof children === "string" ? children : void 0,
+            children: [
+              (kind === "surface" || kind === "panel") && /* @__PURE__ */ jsx(TextWhenString, { kind: "paragraphXSmall", children }),
+              kind === "panel" && /* @__PURE__ */ jsx("div", { className: styles.box }),
+              /* @__PURE__ */ jsxs(RadixCheckbox.Indicator, { className: styles.indicator, children: [
+                (kind === "default" || kind === "panel") && /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    width: 14,
+                    height: 14,
+                    viewBox: "0 0 14 14",
+                    fill: "none",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    children: /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        className: styles.checkSvg,
+                        "data-disabled": disabled,
+                        d: "M0.333374 0.333252V13.6666H13.6667V0.333252H0.333374ZM6.00004 10.3999L2.26672 6.66658L3.66671 5.26658L5.93339 7.53325L10.2 3.26658L11.6001 4.66659L6.00004 10.3999Z"
+                      }
+                    )
+                  }
+                ),
+                kind === "surface" && /* @__PURE__ */ jsx(Icon, { icon: Check, size: 12.8, "data-disabled": disabled, className: styles.checkIcon })
+              ] })
+            ]
+          }
+        ),
+        kind === "switch" && /* @__PURE__ */ jsx(
+          Switch,
+          {
+            checked: resolvedChecked,
+            onChange: setResolvedChecked,
+            className: styles.switchContainer,
+            "data-disabled": disabled,
+            id: inputID,
+            "aria-details": typeof children === "string" ? children : void 0,
+            children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: clsx(styles.knob, resolvedChecked && styles.knobChecked) })
+          }
+        ),
+        (kind === "default" || kind === "switch") && !hideLabel && /* @__PURE__ */ jsx(TextWhenString, { kind: "paragraphXSmall", children }),
+        hideLabel && /* @__PURE__ */ jsx(VisuallyHidden, { children })
+      ]
+    }
+  );
+};
+
+export { Checkbox };
+//# sourceMappingURL=Checkbox.js.map

package/dist/stories/checkbox/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sources":["../../../src/stories/checkbox/Checkbox.tsx"],"sourcesContent":["'use client';\nimport { Switch } from '@headlessui/react';\nimport * as RadixCheckbox from '@radix-ui/react-checkbox';\nimport { clsx } from 'clsx';\nimport type { FC, ReactNode } from 'react';\nimport { useId } from 'react';\nimport { useControllableState } from '../../helpers/useControllableState';\nimport { Check, Icon } from '../icon';\nimport { TextWhenString, VisuallyHidden } from '../utility';\nimport styles from './Checkbox.module.scss';\n\nexport type CheckboxProps = {\n    /** The visual style of the Checkbox. `default` is a standard checkbox with a label next to it, `surface` is a clickable card that displays a check when selected, `panel` is a clickable card with the checkbox aligned right, `switch` is a switch toggle.  */\n    kind?: 'default' | 'surface' | 'panel' | 'switch';\n    checked?: boolean;\n    onChange?: (checked: boolean | 'indeterminate') => void;\n    disabled?: boolean;\n    /**\n     * Whether to hide the label text of the Checkbox. Does not apply to `kind=\"surface\"` because there would be nothing visible.\n     *\n     * @default false\n     */\n    hideLabel?: boolean;\n    /** The initial checked state for uncontrolled mode. If `checked` is provided, this is ignored. */\n    defaultChecked?: boolean;\n    /** The contents of the Checkbox. */\n    children?: ReactNode | ReactNode[];\n} & Omit<React.ComponentPropsWithoutRef<'label'>, 'onChange' | 'children'>;\n\n/**\n * A Checkbox component.\n *\n * <hr />\n *\n * To use this component, import it as follows:\n *\n * ```js\n * import { Checkbox } from 'paris/checkbox';\n * ```\n * @constructor\n */\nexport const Checkbox: FC<CheckboxProps> = ({\n    kind = 'default',\n    checked,\n    defaultChecked,\n    onChange,\n    disabled,\n    hideLabel = false,\n    children,\n    className,\n    ...props\n}) => {\n    const inputID = useId();\n    const [resolvedChecked, setResolvedChecked] = useControllableState({\n        value: checked,\n        defaultValue: defaultChecked,\n        onChange: onChange as ((value: boolean) => void) | undefined,\n    });\n    return (\n        <label\n            htmlFor={inputID}\n            className={clsx(\n                styles.container,\n                disabled && styles.disabled,\n                className,\n                resolvedChecked && styles.checked,\n            )}\n            {...props}\n        >\n            {(kind === 'default' || kind === 'surface' || kind === 'panel') && (\n                <RadixCheckbox.Root\n                    id={inputID}\n                    className={clsx(styles.root, styles[kind])}\n                    checked={resolvedChecked}\n                    onCheckedChange={(v) => setResolvedChecked(!!v)}\n                    data-disabled={disabled}\n                    aria-details={typeof children === 'string' ? children : undefined}\n                >\n                    {(kind === 'surface' || kind === 'panel') && (\n                        <TextWhenString kind=\"paragraphXSmall\">{children}</TextWhenString>\n                    )}\n                    {kind === 'panel' && <div className={styles.box} />}\n                    <RadixCheckbox.Indicator className={styles.indicator}>\n                        {(kind === 'default' || kind === 'panel') && (\n                            <svg\n                                width={14}\n                                height={14}\n                                viewBox=\"0 0 14 14\"\n                                fill=\"none\"\n                                xmlns=\"http://www.w3.org/2000/svg\"\n                            >\n                                <path\n                                    className={styles.checkSvg}\n                                    data-disabled={disabled}\n                                    d=\"M0.333374 0.333252V13.6666H13.6667V0.333252H0.333374ZM6.00004 10.3999L2.26672 6.66658L3.66671 5.26658L5.93339 7.53325L10.2 3.26658L11.6001 4.66659L6.00004 10.3999Z\"\n                                />\n                            </svg>\n                        )}\n                        {kind === 'surface' && (\n                            <Icon icon={Check} size={12.8} data-disabled={disabled} className={styles.checkIcon} />\n                        )}\n                    </RadixCheckbox.Indicator>\n                </RadixCheckbox.Root>\n            )}\n            {kind === 'switch' && (\n                <Switch\n                    checked={resolvedChecked}\n                    onChange={setResolvedChecked}\n                    className={styles.switchContainer}\n                    data-disabled={disabled}\n                    id={inputID}\n                    aria-details={typeof children === 'string' ? children : undefined}\n                >\n                    <span aria-hidden=\"true\" className={clsx(styles.knob, resolvedChecked && styles.knobChecked)} />\n                </Switch>\n            )}\n            {(kind === 'default' || kind === 'switch') && !hideLabel && (\n                <TextWhenString kind=\"paragraphXSmall\">{children}</TextWhenString>\n            )}\n            {hideLabel && <VisuallyHidden>{children}</VisuallyHidden>}\n        </label>\n    );\n};\n"],"names":[],"mappings":"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CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AACN,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CACJ;AAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAEH,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAS,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,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"}

package/dist/stories/checkbox/Checkbox.module.css

@@ -0,0 +1,155 @@
+.paris_container_hJlaN {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 12px;
+  user-select: var(--pte-utils-defaultUserSelect);
+  cursor: default;
+}
+.paris_containerbutton_H-e8h {
+  all: unset;
+}
+.paris_container_hJlaN.paris_disabled_R5-D0 {
+  color: var(--pte-new-colors-contentDisabled);
+  pointer-events: none;
+}
+
+.paris_root_w6zlF.paris_default_qtbVz {
+  background-color: transparent;
+  width: 14px;
+  height: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  border: 2px solid var(--pte-new-colors-contentTertiary);
+  border-radius: var(--pte-borders-radius-rectangle);
+}
+.paris_root_w6zlF.paris_default_qtbVz:focus-visible {
+  outline: 1px solid var(--pte-new-colors-borderUltrastrong);
+}
+.paris_root_w6zlF.paris_default_qtbVz {
+  position: relative;
+}
+.paris_root_w6zlF.paris_default_qtbVz:after {
+  content: "";
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  background-color: transparent;
+  transition: var(--pte-animations-interaction);
+  transition-delay: 50ms;
+}
+.paris_root_w6zlF.paris_default_qtbVz[data-state=checked]:after, .paris_root_w6zlF.paris_default_qtbVz[data-state=indeterminate]:after {
+  opacity: 0;
+}
+.paris_root_w6zlF.paris_default_qtbVz[data-disabled=true] {
+  border-color: var(--pte-new-colors-contentDisabled);
+}
+.paris_root_w6zlF.paris_default_qtbVz span {
+  transition: var(--pte-animations-interaction);
+}
+.paris_root_w6zlF.paris_surface_8yt4c {
+  width: 100%;
+  padding: 6px 10px;
+  color: var(--pte-new-colors-contentSecondary);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  transition: var(--pte-animations-interaction);
+}
+.paris_root_w6zlF.paris_surface_8yt4c:focus-visible {
+  outline: 1px solid var(--pte-new-colors-borderUltrastrong);
+}
+.paris_root_w6zlF.paris_surface_8yt4c[data-state=checked], .paris_root_w6zlF.paris_surface_8yt4c[data-state=indeterminate] {
+  background-color: var(--pte-new-colors-overlayMedium);
+  color: var(--pte-new-colors-contentPrimary);
+}
+.paris_root_w6zlF.paris_surface_8yt4c[data-disabled=true] {
+  color: var(--pte-new-colors-contentDisabled);
+}
+.paris_root_w6zlF.paris_surface_8yt4c:hover {
+  background-color: var(--pte-new-colors-overlayStrong);
+}
+.paris_root_w6zlF.paris_panel_UJPWZ {
+  width: 100%;
+  padding: 8px 10px 8px 8px;
+  color: var(--pte-new-colors-contentSecondary);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  transition: var(--pte-animations-interaction);
+}
+.paris_root_w6zlF.paris_panel_UJPWZ:focus-visible {
+  outline: 1px solid var(--pte-new-colors-borderUltrastrong);
+}
+.paris_root_w6zlF.paris_panel_UJPWZ[data-state=checked], .paris_root_w6zlF.paris_panel_UJPWZ[data-state=indeterminate] {
+  color: var(--pte-new-colors-contentPrimary);
+}
+.paris_root_w6zlF.paris_panel_UJPWZ[data-disabled=true] {
+  color: var(--pte-new-colors-contentDisabled);
+}
+.paris_root_w6zlF.paris_panel_UJPWZ .paris_box_YbOZP {
+  width: 13px;
+  height: 13px;
+  border: 2px solid var(--pte-new-colors-contentTertiary);
+  margin-right: 0.5px;
+}
+.paris_root_w6zlF.paris_panel_UJPWZ[data-state=checked] .paris_box_YbOZP, .paris_root_w6zlF.paris_panel_UJPWZ[data-state=indeterminate] .paris_box_YbOZP {
+  display: none;
+}
+
+.paris_indicator_GKuuB {
+  cursor: default;
+}
+
+.paris_checkSvg_kcNyp {
+  fill: var(--pte-new-colors-contentPrimary);
+}
+.paris_checkSvg_kcNyp[data-disabled=true] {
+  fill: var(--pte-new-colors-contentDisabled);
+}
+
+.paris_checkIcon_Mn7AW {
+  color: var(--pte-new-colors-contentPrimary);
+}
+.paris_checkIcon_Mn7AW[data-disabled=true] {
+  color: var(--pte-new-colors-contentDisabled);
+}
+
+.paris_switchContainer_e6qHl {
+  width: 24px;
+  height: 14px;
+  border-radius: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--pte-new-colors-contentTertiary);
+}
+.paris_switchContainer_e6qHl[data-checked], .paris_switchContainer_e6qHl[data-state=indeterminate] {
+  background-color: var(--pte-new-colors-contentPrimary);
+}
+.paris_switchContainer_e6qHl[data-disabled=true] {
+  background-color: var(--pte-new-colors-contentInverseSecondary);
+}
+.paris_switchContainer_e6qHl[data-disabled=true][data-checked], .paris_switchContainer_e6qHl[data-disabled=true][data-state=indeterminate] {
+  background-color: var(--pte-new-colors-contentInverseTertiary);
+}
+.paris_switchContainer_e6qHl:hover {
+  background-color: var(--pte-new-colors-contentSecondary);
+}
+
+.paris_knob_u7dfK {
+  width: 10px;
+  height: 10px;
+  display: inline-block;
+  border-radius: 100%;
+  background-color: var(--pte-new-colors-contentInversePrimary);
+  transform: translateX(-5px);
+  transition: transform var(--pte-animations-interaction);
+}
+
+.paris_knobChecked_xEO8P {
+  transform: translateX(5px);
+}

package/dist/stories/checkbox/Checkbox.module.scss.js

@@ -0,0 +1,32 @@
+import './Checkbox.module.css';const container = "paris_container_hJlaN";
+const containerbutton = "paris_containerbutton_H-e8h";
+const disabled = "paris_disabled_R5-D0";
+const root = "paris_root_w6zlF";
+const surface = "paris_surface_8yt4c";
+const panel = "paris_panel_UJPWZ";
+const box = "paris_box_YbOZP";
+const indicator = "paris_indicator_GKuuB";
+const checkSvg = "paris_checkSvg_kcNyp";
+const checkIcon = "paris_checkIcon_Mn7AW";
+const switchContainer = "paris_switchContainer_e6qHl";
+const knob = "paris_knob_u7dfK";
+const knobChecked = "paris_knobChecked_xEO8P";
+const styles = {
+	container: container,
+	containerbutton: containerbutton,
+	disabled: disabled,
+	root: root,
+	"default": "paris_default_qtbVz",
+	surface: surface,
+	panel: panel,
+	box: box,
+	indicator: indicator,
+	checkSvg: checkSvg,
+	checkIcon: checkIcon,
+	switchContainer: switchContainer,
+	knob: knob,
+	knobChecked: knobChecked
+};
+
+export { box, checkIcon, checkSvg, container, containerbutton, styles as default, disabled, indicator, knob, knobChecked, panel, root, surface, switchContainer };
+//# sourceMappingURL=Checkbox.module.scss.js.map

package/dist/stories/checkbox/Checkbox.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/stories/checkbox/index.js

@@ -0,0 +1,2 @@
+export { Checkbox } from './Checkbox.js';
+//# sourceMappingURL=index.js.map

package/dist/stories/checkbox/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/stories/codeinput/CodeInput.d.ts

@@ -0,0 +1,47 @@
+import { FC } from 'react';
+export type CodeInputProps = {
+    /** The current code value. Controlled — pass the digits entered so far. */
+    value: string;
+    /** Called with the new value whenever a segment changes. */
+    onChange: (value: string) => void;
+    /** Called once the final segment is filled (i.e. `value.length === length`). */
+    onComplete?: (value: string) => void;
+    /**
+     * Number of digit segments.
+     * @default 6
+     */
+    length?: number;
+    /**
+     * Visual status of the segments.
+     * @default 'default'
+     */
+    status?: 'default' | 'error';
+    /** Disables all segments. */
+    disabled?: boolean;
+    /**
+     * Locks the input and plays a validating animation (a right-to-left fill, then a glare that
+     * sweeps across the segments). Use while a submitted code is being verified.
+     */
+    loading?: boolean;
+    /** Focus the first segment on mount. */
+    autoFocus?: boolean;
+    /**
+     * Accessible label for the group of segments.
+     * @default 'Verification code'
+     */
+    'aria-label'?: string;
+};
+/**
+ * A segmented numeric code input — `length` single-digit cells with auto-advance, paste-to-fill,
+ * backspace-retreat, and arrow-key navigation. Intended for one-time PIN / SMS verification codes.
+ *
+ * <hr />
+ *
+ * To use this component, import it as follows:
+ *
+ * ```js
+ * import { CodeInput } from 'paris/codeinput';
+ * ```
+ * @constructor
+ */
+export declare const CodeInput: FC<CodeInputProps>;