@avenue-ticketing/ui 0.10.0 → 0.12.0-beta.1

package/dist/react/switch.js

@@ -1,117 +1,129 @@
-import * as React from 'react';
-import { useState } from 'react';
-import { Loader2 } from 'lucide-react';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-import { jsx } from 'react/jsx-runtime';
+import { Switch } from 'react-aria-components';
+import { extendTailwindMerge } from 'tailwind-merge';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-var switchSize = {
-  sm: { outerW: 36, outerH: 20, thumb: 16, pad: 2 },
-  md: { outerW: 44, outerH: 24, thumb: 19, pad: 2 },
-  lg: { outerW: 52, outerH: 28, thumb: 22, pad: 2 }
+var twMerge = extendTailwindMerge({
+  extend: {
+    theme: {
+      text: ["display-xs", "display-sm", "display-md", "display-lg", "display-xl", "display-2xl"]
+    }
+  }
+});
+var cx = twMerge;
+var focusRingShadow = "outline-none [box-shadow:0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]";
+var ToggleBase = ({ className, isHovered, isDisabled, isFocusVisible, isSelected, slim, size = "sm" }) => {
+  const styles2 = {
+    default: {
+      sm: {
+        track: "h-5 w-9 p-0.5",
+        thumb: "size-4",
+        thumbPosition: isSelected ? "left-[calc(100%-1rem-0.125rem)]" : "left-0.5"
+      },
+      md: {
+        track: "h-6 w-11 p-0.5",
+        thumb: "size-5",
+        thumbPosition: isSelected ? "left-[calc(100%-1.25rem-0.125rem)]" : "left-0.5"
+      }
+    },
+    slim: {
+      sm: {
+        track: "h-4 w-8",
+        thumb: "size-4",
+        thumbPosition: isSelected ? "left-4" : "left-0"
+      },
+      md: {
+        track: "h-5 w-10",
+        thumb: "size-5",
+        thumbPosition: isSelected ? "left-5" : "left-0"
+      }
+    }
+  };
+  const classes = slim ? styles2.slim[size] : styles2.default[size];
+  const offTrackBackground = (() => {
+    if (isDisabled) return "bg-tertiary";
+    if (isHovered) return slim ? "bg-tertiary" : "bg-brand-primary";
+    return "bg-quaternary";
+  })();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx(
+        "relative inline-flex shrink-0 cursor-pointer overflow-clip rounded-full outline-none transition duration-150 ease-linear",
+        !isSelected && offTrackBackground,
+        !slim && "ring-[0.5px] ring-secondary ring-inset",
+        slim && "ring-1 ring-secondary ring-inset",
+        isSelected && "bg-brand-solid",
+        isSelected && isHovered && "bg-brand-solid_hover",
+        isSelected && "ring-transparent",
+        isDisabled && "cursor-not-allowed opacity-50",
+        isFocusVisible && !isDisabled && focusRingShadow,
+        classes.track,
+        className
+      ),
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cx(
+            "absolute rounded-full bg-fg-white shadow-sm transition-[left] duration-150 ease-in-out",
+            slim ? "top-0 shadow-xs" : "top-0.5",
+            slim && "border border-toggle-border",
+            slim && isSelected && "border-toggle-slim-border_pressed",
+            slim && isSelected && isHovered && "border-toggle-slim-border_pressed-hover",
+            classes.thumb,
+            classes.thumbPosition
+          )
+        }
+      )
+    }
+  );
 };
-var loaderIconClass = {
-  sm: "size-4",
-  md: "size-[1.125rem]",
-  lg: "size-5"
+var styles = {
+  sm: {
+    root: "gap-2",
+    textWrapper: "",
+    label: "text-sm font-medium",
+    hint: "text-sm"
+  },
+  md: {
+    root: "gap-3",
+    textWrapper: "gap-0.5",
+    label: "text-md font-medium",
+    hint: "text-md"
+  }
 };
-var Switch = React.forwardRef(
-  ({
-    checked: checkedProp,
-    defaultChecked = false,
-    onCheckedChange,
-    disabled = false,
-    loading = false,
-    size = "md",
-    className,
-    thumbClassName,
-    onClick,
-    ...rest
-  }, ref) => {
-    const isControlled = checkedProp !== void 0;
-    const [uncontrolledChecked, setUncontrolledChecked] = useState(
-      defaultChecked
-    );
-    const checked = isControlled ? Boolean(checkedProp) : uncontrolledChecked;
-    const s = switchSize[size];
-    return /* @__PURE__ */ jsx(
-      "button",
-      {
-        ref,
-        type: "button",
-        role: "switch",
-        "data-slot": "switch",
-        "data-size": size,
-        "data-state": checked ? "checked" : "unchecked",
-        "data-loading": loading ? "" : void 0,
-        "aria-checked": checked,
-        "aria-busy": loading || void 0,
-        disabled,
-        className: cn(
-          "ring-offset-background box-border inline-flex shrink-0 rounded-full border border-transparent p-0 shadow-sm outline-none select-none transition-colors",
-          "focus-visible:ring-primary/40 focus-visible:ring-2 focus-visible:ring-offset-2",
-          "disabled:cursor-not-allowed disabled:opacity-50",
-          loading && "cursor-wait",
-          !loading && !disabled && "cursor-pointer",
-          checked ? "bg-primary" : "bg-primary/10",
-          className
-        ),
-        style: {
-          width: s.outerW,
-          height: s.outerH
-        },
-        onClick: (e) => {
-          onClick?.(e);
-          if (e.defaultPrevented) return;
-          if (loading) return;
-          if (disabled) return;
-          if (isControlled) {
-            onCheckedChange?.(!checked);
-            return;
-          }
-          setUncontrolledChecked((prev) => {
-            const next = !prev;
-            onCheckedChange?.(next);
-            return next;
-          });
-        },
-        ...rest,
-        children: /* @__PURE__ */ jsx("span", { className: "relative block h-full w-full overflow-hidden rounded-[inherit]", children: /* @__PURE__ */ jsx(
-          "span",
+var Toggle = ({ label, hint, className, size = "sm", slim, ...ariaSwitchProps }) => {
+  return /* @__PURE__ */ jsx(
+    Switch,
+    {
+      ...ariaSwitchProps,
+      className: (state) => cx(
+        "relative flex w-max items-start",
+        state.isDisabled && "cursor-not-allowed",
+        styles[size].root,
+        typeof className === "function" ? className(state) : className
+      ),
+      children: ({ isSelected, isDisabled, isFocusVisible, isHovered }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          ToggleBase,
           {
-            "aria-hidden": true,
-            className: cn(
-              "pointer-events-none absolute top-1/2 transition-[left] duration-150 ease-out",
-              loading ? "flex items-center justify-center bg-transparent shadow-none ring-0" : "block rounded-full bg-background shadow-sm ring-0",
-              thumbClassName
-            ),
-            style: {
-              width: s.thumb,
-              height: s.thumb,
-              left: checked ? `calc(100% - ${s.thumb + s.pad}px)` : `${s.pad}px`,
-              transform: "translateY(-50%)"
-            },
-            children: loading ? /* @__PURE__ */ jsx(
-              Loader2,
-              {
-                className: cn(
-                  "animate-spin",
-                  checked ? "text-background" : "text-primary",
-                  loaderIconClass[size]
-                )
-              }
-            ) : null
+            slim,
+            size,
+            isHovered,
+            isDisabled,
+            isFocusVisible,
+            isSelected,
+            className: label || hint ? "mt-0.5" : ""
           }
-        ) })
-      }
-    );
-  }
-);
-Switch.displayName = "Switch";
+        ),
+        (label || hint) && /* @__PURE__ */ jsxs("div", { className: cx("flex flex-col", styles[size].textWrapper), children: [
+          label && /* @__PURE__ */ jsx("p", { className: cx("text-secondary select-none", styles[size].label), children: label }),
+          hint && /* @__PURE__ */ jsx("span", { className: cx("text-tertiary", styles[size].hint), onClick: (event) => event.stopPropagation(), children: hint })
+        ] })
+      ] })
+    }
+  );
+};
 
-export { Switch };
+export { Toggle, ToggleBase };
 //# sourceMappingURL=switch.js.map
 //# sourceMappingURL=switch.js.map

package/dist/react/switch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/lib/utils.ts","../../src/react/switch.tsx"],"names":[],"mappings":"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","file":"switch.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport * as React from \"react\";\nimport { useState } from \"react\";\nimport { Loader2 } from \"lucide-react\";\n\nimport { cn } from \"../lib/utils\";\n\n/** small pad so the thumb sits close to the track edge like a hardware switch */\nconst switchSize = {\n  sm: { outerW: 36, outerH: 20, thumb: 16, pad: 2 },\n  md: { outerW: 44, outerH: 24, thumb: 19, pad: 2 },\n  lg: { outerW: 52, outerH: 28, thumb: 22, pad: 2 },\n} as const;\n\nconst loaderIconClass: Record<keyof typeof switchSize, string> = {\n  sm: \"size-4\",\n  md: \"size-[1.125rem]\",\n  lg: \"size-5\",\n};\n\nexport type SwitchSize = keyof typeof switchSize;\n\nexport type SwitchProps = Omit<\n  React.ComponentProps<\"button\">,\n  \"type\" | \"role\" | \"aria-checked\" | \"children\"\n> & {\n  checked?: boolean;\n  defaultChecked?: boolean;\n  onCheckedChange?: (next: boolean) => void;\n  /** @default md */\n  size?: SwitchSize;\n  /** replaces the thumb with a spinner; clicks are ignored until false */\n  loading?: boolean;\n  /** merged onto the sliding thumb */\n  thumbClassName?: string;\n};\n\nconst Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(\n  (\n    {\n      checked: checkedProp,\n      defaultChecked = false,\n      onCheckedChange,\n      disabled = false,\n      loading = false,\n      size = \"md\",\n      className,\n      thumbClassName,\n      onClick,\n      ...rest\n    },\n    ref,\n  ) => {\n    const isControlled = checkedProp !== undefined;\n    const [uncontrolledChecked, setUncontrolledChecked] = useState(\n      defaultChecked,\n    );\n    const checked = isControlled ? Boolean(checkedProp) : uncontrolledChecked;\n\n    const s = switchSize[size];\n\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        role=\"switch\"\n        data-slot=\"switch\"\n        data-size={size}\n        data-state={checked ? \"checked\" : \"unchecked\"}\n        data-loading={loading ? \"\" : undefined}\n        aria-checked={checked}\n        aria-busy={loading || undefined}\n        disabled={disabled}\n        className={cn(\n          \"ring-offset-background box-border inline-flex shrink-0 rounded-full border border-transparent p-0 shadow-sm outline-none select-none transition-colors\",\n          \"focus-visible:ring-primary/40 focus-visible:ring-2 focus-visible:ring-offset-2\",\n          \"disabled:cursor-not-allowed disabled:opacity-50\",\n          loading && \"cursor-wait\",\n          !loading && !disabled && \"cursor-pointer\",\n          checked ? \"bg-primary\" : \"bg-primary/10\",\n          className,\n        )}\n        style={{\n          width: s.outerW,\n          height: s.outerH,\n        }}\n        onClick={(e) => {\n          onClick?.(e);\n          if (e.defaultPrevented) return;\n          if (loading) return;\n          if (disabled) return;\n          if (isControlled) {\n            onCheckedChange?.(!checked);\n            return;\n          }\n          setUncontrolledChecked((prev) => {\n            const next = !prev;\n            onCheckedChange?.(next);\n            return next;\n          });\n        }}\n        {...rest}\n      >\n        <span className=\"relative block h-full w-full overflow-hidden rounded-[inherit]\">\n          <span\n            aria-hidden\n            className={cn(\n              \"pointer-events-none absolute top-1/2 transition-[left] duration-150 ease-out\",\n              loading\n                ? \"flex items-center justify-center bg-transparent shadow-none ring-0\"\n                : \"block rounded-full bg-background shadow-sm ring-0\",\n              thumbClassName,\n            )}\n            style={{\n              width: s.thumb,\n              height: s.thumb,\n              left: checked\n                ? `calc(100% - ${s.thumb + s.pad}px)`\n                : `${s.pad}px`,\n              transform: \"translateY(-50%)\",\n            }}\n          >\n            {loading ? (\n              <Loader2\n                className={cn(\n                  \"animate-spin\",\n                  checked ? \"text-background\" : \"text-primary\",\n                  loaderIconClass[size],\n                )}\n              />\n            ) : null}\n          </span>\n        </span>\n      </button>\n    );\n  },\n);\nSwitch.displayName = \"Switch\";\n\nexport { Switch };\n"]}
+{"version":3,"sources":["../../../../utils/cx.ts","../../../../components/base/toggle/toggle.tsx"],"names":["styles","AriaSwitch"],"mappings":"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","file":"switch.js","sourcesContent":["import { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n    extend: {\n        theme: {\n            text: [\"display-xs\", \"display-sm\", \"display-md\", \"display-lg\", \"display-xl\", \"display-2xl\"],\n        },\n    },\n});\n\n/**\n * This function is a wrapper around the twMerge function.\n * It is used to merge the classes inside style objects.\n */\nexport const cx = twMerge;\n\n/**\n * This function does nothing besides helping us to be able to\n * sort the classes inside style objects which is not supported\n * by the Tailwind IntelliSense by default.\n */\nexport function sortCx<T extends Record<string, string | number | Record<string, string | number | Record<string, string | number>>>>(classes: T): T {\n    return classes;\n}\n","\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport type { SwitchProps as AriaSwitchProps } from \"react-aria-components\";\nimport { Switch as AriaSwitch } from \"react-aria-components\";\nimport { cx } from \"@/utils/cx\";\n\n/** Figma: Toggle (1102:4631) — spread focus ring (2px surface gap + 4px focus-ring). */\nconst focusRingShadow =\n    \"outline-none [box-shadow:0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]\";\n\ninterface ToggleBaseProps {\n    size?: \"sm\" | \"md\";\n    slim?: boolean;\n    className?: string;\n    isHovered?: boolean;\n    isFocusVisible?: boolean;\n    isSelected?: boolean;\n    isDisabled?: boolean;\n}\n\nexport const ToggleBase = ({ className, isHovered, isDisabled, isFocusVisible, isSelected, slim, size = \"sm\" }: ToggleBaseProps) => {\n    const styles = {\n        default: {\n            sm: {\n                track: \"h-5 w-9 p-0.5\",\n                thumb: \"size-4\",\n                thumbPosition: isSelected ? \"left-[calc(100%-1rem-0.125rem)]\" : \"left-0.5\",\n            },\n            md: {\n                track: \"h-6 w-11 p-0.5\",\n                thumb: \"size-5\",\n                thumbPosition: isSelected ? \"left-[calc(100%-1.25rem-0.125rem)]\" : \"left-0.5\",\n            },\n        },\n        slim: {\n            sm: {\n                track: \"h-4 w-8\",\n                thumb: \"size-4\",\n                thumbPosition: isSelected ? \"left-4\" : \"left-0\",\n            },\n            md: {\n                track: \"h-5 w-10\",\n                thumb: \"size-5\",\n                thumbPosition: isSelected ? \"left-5\" : \"left-0\",\n            },\n        },\n    };\n\n    const classes = slim ? styles.slim[size] : styles.default[size];\n\n    const offTrackBackground = (() => {\n        if (isDisabled) return \"bg-tertiary\";\n        if (isHovered) return slim ? \"bg-tertiary\" : \"bg-brand-primary\";\n        return \"bg-quaternary\";\n    })();\n\n    return (\n        <div\n            className={cx(\n                \"relative inline-flex shrink-0 cursor-pointer overflow-clip rounded-full outline-none transition duration-150 ease-linear\",\n                !isSelected && offTrackBackground,\n                !slim && \"ring-[0.5px] ring-secondary ring-inset\",\n                slim && \"ring-1 ring-secondary ring-inset\",\n                isSelected && \"bg-brand-solid\",\n                isSelected && isHovered && \"bg-brand-solid_hover\",\n                isSelected && \"ring-transparent\",\n                isDisabled && \"cursor-not-allowed opacity-50\",\n                isFocusVisible && !isDisabled && focusRingShadow,\n                classes.track,\n                className,\n            )}\n        >\n            <div\n                className={cx(\n                    \"absolute rounded-full bg-fg-white shadow-sm transition-[left] duration-150 ease-in-out\",\n                    slim ? \"top-0 shadow-xs\" : \"top-0.5\",\n                    slim && \"border border-toggle-border\",\n                    slim && isSelected && \"border-toggle-slim-border_pressed\",\n                    slim && isSelected && isHovered && \"border-toggle-slim-border_pressed-hover\",\n                    classes.thumb,\n                    classes.thumbPosition,\n                )}\n            />\n        </div>\n    );\n};\n\nconst styles = {\n    sm: {\n        root: \"gap-2\",\n        textWrapper: \"\",\n        label: \"text-sm font-medium\",\n        hint: \"text-sm\",\n    },\n    md: {\n        root: \"gap-3\",\n        textWrapper: \"gap-0.5\",\n        label: \"text-md font-medium\",\n        hint: \"text-md\",\n    },\n};\n\ninterface ToggleProps extends AriaSwitchProps {\n    size?: \"sm\" | \"md\";\n    label?: string;\n    hint?: ReactNode;\n    slim?: boolean;\n}\n\nexport const Toggle = ({ label, hint, className, size = \"sm\", slim, ...ariaSwitchProps }: ToggleProps) => {\n    return (\n        <AriaSwitch\n            {...ariaSwitchProps}\n            className={(state) =>\n                cx(\n                    \"relative flex w-max items-start\",\n                    state.isDisabled && \"cursor-not-allowed\",\n                    styles[size].root,\n                    typeof className === \"function\" ? className(state) : className,\n                )\n            }\n        >\n            {({ isSelected, isDisabled, isFocusVisible, isHovered }) => (\n                <>\n                    <ToggleBase\n                        slim={slim}\n                        size={size}\n                        isHovered={isHovered}\n                        isDisabled={isDisabled}\n                        isFocusVisible={isFocusVisible}\n                        isSelected={isSelected}\n                        className={label || hint ? \"mt-0.5\" : \"\"}\n                    />\n\n                    {(label || hint) && (\n                        <div className={cx(\"flex flex-col\", styles[size].textWrapper)}>\n                            {label && <p className={cx(\"text-secondary select-none\", styles[size].label)}>{label}</p>}\n                            {hint && (\n                                <span className={cx(\"text-tertiary\", styles[size].hint)} onClick={(event) => event.stopPropagation()}>\n                                    {hint}\n                                </span>\n                            )}\n                        </div>\n                    )}\n                </>\n            )}\n        </AriaSwitch>\n    );\n};\n"]}

package/dist/react/tag-select.d.ts

@@ -0,0 +1,44 @@
+import react__default, { RefAttributes, RefObject, FocusEventHandler, PointerEventHandler } from 'react';
+import { ComboBoxProps, ListBoxProps, Key, GroupProps } from 'react-aria-components';
+import { ListData } from 'react-stately';
+import { I as IconComponentType } from '../badge-types-B67wcd4m.js';
+import { S as SelectItemType } from '../select-shared-B3Y5SMXU.js';
+import { SelectItem } from './select-item.js';
+
+/** Figma: Tag select (11132:11643) */
+
+interface TagSelectValueProps extends GroupProps {
+    size: "sm" | "md" | "lg";
+    shortcut?: boolean;
+    isDisabled?: boolean;
+    placeholder?: string;
+    shortcutClassName?: string;
+    icon?: IconComponentType | null;
+    ref?: RefObject<HTMLDivElement | null>;
+    onFocus?: FocusEventHandler;
+    onPointerEnter?: PointerEventHandler;
+}
+interface TagSelectProps extends Omit<ComboBoxProps<SelectItemType>, "children" | "items">, RefAttributes<HTMLDivElement> {
+    hint?: string;
+    label?: string;
+    tooltip?: string;
+    size?: "sm" | "md" | "lg";
+    placeholder?: string;
+    shortcut?: boolean;
+    items?: SelectItemType[];
+    popoverClassName?: string;
+    shortcutClassName?: string;
+    selectedItems: ListData<SelectItemType>;
+    icon?: IconComponentType | null;
+    children: ListBoxProps<SelectItemType>["children"];
+    onItemCleared?: (key: Key) => void;
+    onItemInserted?: (key: Key) => void;
+    valueFormatter?: (item: SelectItemType) => string;
+}
+declare const TagSelectBase: ({ items, children, size, selectedItems, onItemCleared, onItemInserted, valueFormatter, shortcut, placeholder, icon, name: _name, className, ...props }: TagSelectProps) => react__default.JSX.Element;
+declare const TagSelectTagsValue: ({ size, shortcut, placeholder, shortcutClassName, icon: Icon, isDisabled: _isDisabled, ...otherProps }: TagSelectValueProps) => react__default.JSX.Element;
+declare const TagSelect: typeof TagSelectBase & {
+    Item: typeof SelectItem;
+};
+
+export { TagSelect, TagSelectBase, TagSelectTagsValue };