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

package/dist/react/tags.js

@@ -32,11 +32,11 @@ var CHECKBOX_TICK_DELAY_MS = 60;
 var CHECKBOX_TICK_DRAW_MS = 100;
 var focusRingShadow = "outline-none [box-shadow:0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]";
 var sizes2 = {
-  sm: { box: "size-3.5 rounded-xs", inset: "inset-[14.29%]" },
-  md: { box: "size-4 rounded-xs", inset: "inset-[12.5%]" },
-  lg: { box: "size-4.5 rounded-xs", inset: "inset-[13.89%]" }
+  sm: { box: "size-3.5 rounded-xs", iconPixelSize: 10 },
+  md: { box: "size-4 rounded-xs", iconPixelSize: 12 },
+  lg: { box: "size-4.5 rounded-xs", iconPixelSize: 13 }
 };
-function TagCheckboxAnimatedCheckMark({ className }) {
+function TagCheckboxAnimatedCheckMark({ pixelSize, className }) {
   const pathRef = useRef(null);
   useLayoutEffect(() => {
     const path = pathRef.current;
@@ -57,7 +57,7 @@ function TagCheckboxAnimatedCheckMark({ className }) {
     });
     return () => anim.cancel();
   }, []);
-  return /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", viewBox: "0 0 14 14", fill: "none", className, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", width: pixelSize, height: pixelSize, viewBox: "0 0 14 14", fill: "none", className: cx("block", className), children: /* @__PURE__ */ jsx(
     "path",
     {
       ref: pathRef,
@@ -70,7 +70,7 @@ function TagCheckboxAnimatedCheckMark({ className }) {
   ) });
 }
 var TagCheckbox = ({ className, isFocused, isSelected, isDisabled, size = "sm" }) => {
-  const { box, inset } = sizes2[size];
+  const { box, iconPixelSize } = sizes2[size];
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -83,7 +83,7 @@ var TagCheckbox = ({ className, isFocused, isSelected, isDisabled, size = "sm" }
         isFocused && !isDisabled && focusRingShadow,
         className
       ),
-      children: isSelected && /* @__PURE__ */ jsx(TagCheckboxAnimatedCheckMark, { className: cx("pointer-events-none absolute text-fg-white", inset) })
+      children: isSelected && /* @__PURE__ */ jsx(TagCheckboxAnimatedCheckMark, { pixelSize: iconPixelSize, className: "pointer-events-none text-fg-white" })
     }
   );
 };
@@ -205,7 +205,7 @@ var Tag = ({
         // With count
         typeof count === "number" && styles2[context.size].root.withCount,
         // With checkbox
-        context.selectionMode !== "none" && styles2[context.size].root.withCheckbox,
+        context.selectionMode !== "none" && cx("cursor-pointer", styles2[context.size].root.withCheckbox),
         // Disabled
         isDisabled && "cursor-not-allowed",
         typeof className === "function" ? className(state) : className

package/dist/react/tags.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../components/foundations/dot-icon.tsx","../../../../utils/cx.ts","../../../../components/base/tags/base-components/tag-checkbox.tsx","../../../../components/base/tags/base-components/tag-close-x.tsx","../../../../components/base/tags/tags.tsx"],"names":["sizes","jsx","AriaButton","XClose","focusShadowPlain","User01","AriaTagGroup","AriaTagList","styles","AriaTag","isDisabled"],"mappings":"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","file":"tags.js","sourcesContent":["\"use client\";\n\nimport type { HTMLAttributes } from \"react\";\n\nconst sizes = {\n    sm: {\n        wh: 8,\n        c: 4,\n        r: 2.5,\n    },\n    md: {\n        wh: 10,\n        c: 5,\n        r: 4,\n    },\n};\n\nexport const Dot = ({ size = \"md\", ...props }: HTMLAttributes<HTMLOrSVGElement> & { size?: \"sm\" | \"md\" }) => {\n    return (\n        <svg width={sizes[size].wh} height={sizes[size].wh} viewBox={`0 0 ${sizes[size].wh} ${sizes[size].wh}`} fill=\"none\" {...props}>\n            <circle cx={sizes[size].c} cy={sizes[size].c} r={sizes[size].r} fill=\"currentColor\" stroke=\"currentColor\" />\n        </svg>\n    );\n};\n","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 { useLayoutEffect, useRef } from \"react\";\nimport { cx } from \"@/utils/cx\";\n\nconst CHECKBOX_TICK_DELAY_MS = 60;\nconst CHECKBOX_TICK_DRAW_MS = 100;\n\n/** Figma Focus rings/focus-ring — 2px surface gap + 4px brand ring (matches Checkbox). */\nconst focusRingShadow =\n    \"outline-none [box-shadow:0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]\";\n\nconst sizes = {\n    sm: { box: \"size-3.5 rounded-xs\", inset: \"inset-[14.29%]\" },\n    md: { box: \"size-4 rounded-xs\", inset: \"inset-[12.5%]\" },\n    lg: { box: \"size-4.5 rounded-xs\", inset: \"inset-[13.89%]\" },\n} as const;\n\n/** Draw-on-check tick animation — remounts when checked so it replays each time. */\nfunction TagCheckboxAnimatedCheckMark({ className }: { className?: string }) {\n    const pathRef = useRef<SVGPathElement>(null);\n\n    useLayoutEffect(() => {\n        const path = pathRef.current;\n        if (!path || typeof path.getTotalLength !== \"function\") return;\n        const len = path.getTotalLength();\n        if (len <= 0) return;\n\n        path.style.strokeDasharray = `${len}`;\n        path.style.strokeDashoffset = `${len}`;\n\n        if (typeof path.animate !== \"function\") {\n            path.style.strokeDashoffset = \"0\";\n            return;\n        }\n\n        const anim = path.animate([{ strokeDashoffset: len }, { strokeDashoffset: 0 }], {\n            duration: CHECKBOX_TICK_DRAW_MS,\n            delay: CHECKBOX_TICK_DELAY_MS,\n            easing: \"cubic-bezier(0.45, 0, 0.2, 1)\",\n            fill: \"forwards\",\n        });\n        return () => anim.cancel();\n    }, []);\n\n    return (\n        <svg aria-hidden=\"true\" viewBox=\"0 0 14 14\" fill=\"none\" className={className}>\n            <path\n                ref={pathRef}\n                d=\"M2.33325 7L5.24992 9.91667L11.6666 3.5\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n            />\n        </svg>\n    );\n}\n\ninterface TagCheckboxProps {\n    size?: keyof typeof sizes;\n    className?: string;\n    isFocused?: boolean;\n    isSelected?: boolean;\n    isDisabled?: boolean;\n}\n\n/** Figma: _Tag checkbox (3308:406033) */\nexport const TagCheckbox = ({ className, isFocused, isSelected, isDisabled, size = \"sm\" }: TagCheckboxProps) => {\n    const { box, inset } = sizes[size];\n\n    return (\n        <div\n            className={cx(\n                \"relative flex shrink-0 cursor-pointer appearance-none items-center justify-center overflow-clip border border-solid border-primary\",\n                box,\n                isSelected ? \"border-transparent bg-brand-solid\" : \"bg-primary\",\n                isDisabled && \"cursor-not-allowed opacity-50\",\n                isDisabled && !isSelected && \"bg-tertiary\",\n                isFocused && !isDisabled && focusRingShadow,\n                className,\n            )}\n        >\n            {isSelected && <TagCheckboxAnimatedCheckMark className={cx(\"pointer-events-none absolute text-fg-white\", inset)} />}\n        </div>\n    );\n};\nTagCheckbox.displayName = \"TagCheckbox\";\n","\"use client\";\n\nimport type { RefAttributes } from \"react\";\nimport { XIcon as XClose } from \"@phosphor-icons/react/dist/csr/X\";\nimport { Button as AriaButton, type ButtonProps as AriaButtonProps } from \"react-aria-components\";\nimport { cx } from \"@/utils/cx\";\n\n/**\n * Figma: _Tag close X (3307:417672)\n * Total hit target: sm 14px, md 16px, lg 20px (padding + icon).\n */\n\nconst focusShadowPlain =\n    \"focus-visible:outline-none focus-visible:[box-shadow:0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]\";\n\ninterface TagCloseXProps extends AriaButtonProps, RefAttributes<HTMLButtonElement> {\n    size?: \"sm\" | \"md\" | \"lg\";\n    className?: string;\n}\n\nconst styles = {\n    sm: { root: \"p-0.5\", icon: \"size-2.5\" },\n    md: { root: \"p-0.5\", icon: \"size-3\" },\n    lg: { root: \"p-[3px]\", icon: \"size-3.5\" },\n};\n\nexport const TagCloseX = ({ size = \"md\", className, ...otherProps }: TagCloseXProps) => {\n    return (\n        <AriaButton\n            slot=\"remove\"\n            aria-label=\"Remove this tag\"\n            className={cx(\n                \"flex cursor-pointer rounded-[3px] text-fg-quaternary outline-transparent transition duration-100 ease-linear hover:bg-primary_hover focus-visible:rounded-[3px] disabled:cursor-not-allowed disabled:opacity-50\",\n                focusShadowPlain,\n                styles[size].root,\n                className,\n            )}\n            {...otherProps}\n        >\n            <XClose className={cx(\"shrink-0 transition-inherit-all\", styles[size].icon)} />\n        </AriaButton>\n    );\n};\n","\"use client\";\n\n/** Figma: Tags (3306:403749) — shell uses border-primary + spread focus ring. */\n\nimport { type ImgHTMLAttributes, type PropsWithChildren, type RefAttributes, createContext, useContext, useState } from \"react\";\nimport { UserIcon as User01 } from \"@phosphor-icons/react/dist/csr/User\";\nimport {\n    Tag as AriaTag,\n    TagGroup as AriaTagGroup,\n    type TagGroupProps as AriaTagGroupProps,\n    TagList as AriaTagList,\n    type TagProps as AriaTagProps,\n} from \"react-aria-components\";\nimport { Dot } from \"@/components/foundations/dot-icon\";\nimport { cx } from \"@/utils/cx\";\nimport { TagCheckbox } from \"./base-components/tag-checkbox\";\nimport { TagCloseX } from \"./base-components/tag-close-x\";\n\nconst focusShadowPlain =\n    \"focus-visible:outline-none focus-visible:[box-shadow:0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]\";\n\nexport const TagAvatar = ({ src, alt, contrastBorder = true, className }: ImgHTMLAttributes<HTMLImageElement> & { contrastBorder?: boolean }) => {\n    const [isFailed, setIsFailed] = useState(false);\n\n    return (\n        <div\n            className={cx(\n                \"relative inline-flex size-4 shrink-0 items-center justify-center overflow-hidden rounded-full bg-tertiary\",\n                contrastBorder && \"outline-[0.5px] -outline-offset-[0.5px] outline-black/16\",\n                className,\n            )}\n        >\n            {src && !isFailed ? (\n                <img data-avatar-img className=\"size-full object-cover\" src={src} alt={alt} onError={() => setIsFailed(true)} />\n            ) : (\n                <User01 className=\"size-3 stroke-[2.25px] text-fg-quaternary\" />\n            )}\n        </div>\n    );\n};\n\nexport interface TagItem {\n    id: string;\n    label: string;\n    count?: number;\n    avatarSrc?: string;\n    avatarContrastBorder?: boolean;\n    dot?: boolean;\n    dotClassName?: string;\n    isDisabled?: boolean;\n    onClose?: (id: string) => void;\n}\n\nconst TagGroupContext = createContext<{\n    selectionMode: \"none\" | \"single\" | \"multiple\";\n    size: \"sm\" | \"md\" | \"lg\";\n}>({\n    selectionMode: \"none\",\n    size: \"sm\",\n});\n\ninterface TagGroupProps extends AriaTagGroupProps, RefAttributes<HTMLDivElement> {\n    label: string;\n    size?: \"sm\" | \"md\" | \"lg\";\n}\n\nexport const TagGroup = ({ label, selectionMode = \"none\", size = \"sm\", children, ...otherProps }: TagGroupProps) => {\n    return (\n        <TagGroupContext.Provider value={{ selectionMode, size }}>\n            <AriaTagGroup aria-label={label} selectionMode={selectionMode} disallowEmptySelection={selectionMode === \"single\"} {...otherProps}>\n                {children}\n            </AriaTagGroup>\n        </TagGroupContext.Provider>\n    );\n};\n\nexport const TagList = AriaTagList;\n\nconst styles = {\n    sm: {\n        root: {\n            base: \"px-2 py-0.75 text-xs font-medium\",\n            withCheckbox: \"pl-1.25\",\n            withAvatar: \"pl-1\",\n            withDot: \"pl-1.5\",\n            withCount: \"pr-1\",\n            withClose: \"pr-1\",\n        },\n        content: \"gap-1\",\n        count: \"px-1 text-xs font-medium\",\n    },\n    md: {\n        root: {\n            base: \"px-2.25 py-0.5 text-sm font-medium\",\n            withCheckbox: \"pl-1\",\n            withAvatar: \"pl-1.25\",\n            withDot: \"pl-1.75\",\n            withCount: \"pr-0.75\",\n            withClose: \"pr-1\",\n        },\n        content: \"gap-1.25\",\n        count: \"px-1.25 text-xs font-medium\",\n    },\n    lg: {\n        root: {\n            base: \"px-2.5 py-1 text-sm font-medium\",\n            withCheckbox: \"pl-1.25\",\n            withAvatar: \"pl-1.75\",\n            withDot: \"pl-2.25\",\n            withCount: \"pr-1\",\n            withClose: \"pr-1\",\n        },\n        content: \"gap-1.5\",\n        count: \"px-1.5 text-sm font-medium\",\n    },\n};\n\ninterface TagProps extends AriaTagProps, RefAttributes<object>, Omit<TagItem, \"label\" | \"id\"> {}\n\nexport const Tag = ({\n    id,\n    avatarSrc,\n    avatarContrastBorder = true,\n    dot,\n    dotClassName,\n    isDisabled,\n    count,\n    className,\n    children,\n    onClose,\n}: PropsWithChildren<TagProps>) => {\n    const context = useContext(TagGroupContext);\n\n    const leadingContent = avatarSrc ? (\n        <TagAvatar src={avatarSrc} alt=\"Avatar\" contrastBorder={avatarContrastBorder} />\n    ) : dot ? (\n        <Dot className={cx(\"text-fg-success-secondary\", dotClassName)} size=\"sm\" />\n    ) : null;\n\n    return (\n        <AriaTag\n            id={id}\n            isDisabled={isDisabled}\n            textValue={typeof children === \"string\" ? children : undefined}\n            className={(state) =>\n                cx(\n                    \"flex cursor-default items-center gap-0.75 rounded-md border border-solid border-primary bg-primary text-secondary transition duration-50 ease-linear\",\n                    focusShadowPlain,\n                    styles[context.size].root.base,\n\n                    // With avatar\n                    avatarSrc && styles[context.size].root.withAvatar,\n                    // With X button\n                    (onClose || state.allowsRemoving) && styles[context.size].root.withClose,\n                    // With dot\n                    dot && styles[context.size].root.withDot,\n                    // With count\n                    typeof count === \"number\" && styles[context.size].root.withCount,\n                    // With checkbox\n                    context.selectionMode !== \"none\" && styles[context.size].root.withCheckbox,\n                    // Disabled\n                    isDisabled && \"cursor-not-allowed\",\n\n                    typeof className === \"function\" ? className(state) : className,\n                )\n            }\n        >\n            {({ isSelected, isDisabled, allowsRemoving }) => (\n                <>\n                    <div className={cx(\"flex items-center gap-1\", styles[context.size].content)}>\n                        {context.selectionMode !== \"none\" && <TagCheckbox size={context.size} isSelected={isSelected} isDisabled={isDisabled} />}\n\n                        {leadingContent}\n\n                        {children}\n\n                        {typeof count === \"number\" && (\n                            <span className={cx(\"flex items-center justify-center rounded-[3px] bg-tertiary text-center\", styles[context.size].count)}>\n                                {count}\n                            </span>\n                        )}\n                    </div>\n\n                    {(onClose || allowsRemoving) && (\n                        <TagCloseX size={context.size} excludeFromTabOrder={allowsRemoving} onPress={() => id && onClose?.(id.toString())} />\n                    )}\n                </>\n            )}\n        </AriaTag>\n    );\n};\n"]}
+{"version":3,"sources":["../../../../components/foundations/dot-icon.tsx","../../../../utils/cx.ts","../../../../components/base/tags/base-components/tag-checkbox.tsx","../../../../components/base/tags/base-components/tag-close-x.tsx","../../../../components/base/tags/tags.tsx"],"names":["sizes","jsx","AriaButton","XClose","focusShadowPlain","User01","AriaTagGroup","AriaTagList","styles","AriaTag","isDisabled"],"mappings":"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","file":"tags.js","sourcesContent":["\"use client\";\n\nimport type { HTMLAttributes } from \"react\";\n\nconst sizes = {\n    sm: {\n        wh: 8,\n        c: 4,\n        r: 2.5,\n    },\n    md: {\n        wh: 10,\n        c: 5,\n        r: 4,\n    },\n};\n\nexport const Dot = ({ size = \"md\", ...props }: HTMLAttributes<HTMLOrSVGElement> & { size?: \"sm\" | \"md\" }) => {\n    return (\n        <svg width={sizes[size].wh} height={sizes[size].wh} viewBox={`0 0 ${sizes[size].wh} ${sizes[size].wh}`} fill=\"none\" {...props}>\n            <circle cx={sizes[size].c} cy={sizes[size].c} r={sizes[size].r} fill=\"currentColor\" stroke=\"currentColor\" />\n        </svg>\n    );\n};\n","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 { useLayoutEffect, useRef } from \"react\";\nimport { cx } from \"@/utils/cx\";\n\nconst CHECKBOX_TICK_DELAY_MS = 60;\nconst CHECKBOX_TICK_DRAW_MS = 100;\n\n/** Figma Focus rings/focus-ring — 2px surface gap + 4px brand ring (matches Checkbox). */\nconst focusRingShadow =\n    \"outline-none [box-shadow:0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]\";\n\nconst sizes = {\n    sm: { box: \"size-3.5 rounded-xs\", iconPixelSize: 10 },\n    md: { box: \"size-4 rounded-xs\", iconPixelSize: 12 },\n    lg: { box: \"size-4.5 rounded-xs\", iconPixelSize: 13 },\n} as const;\n\n/** Draw-on-check tick animation — remounts when checked so it replays each time. */\nfunction TagCheckboxAnimatedCheckMark({ pixelSize, className }: { pixelSize: number; className?: string }) {\n    const pathRef = useRef<SVGPathElement>(null);\n\n    useLayoutEffect(() => {\n        const path = pathRef.current;\n        if (!path || typeof path.getTotalLength !== \"function\") return;\n        const len = path.getTotalLength();\n        if (len <= 0) return;\n\n        path.style.strokeDasharray = `${len}`;\n        path.style.strokeDashoffset = `${len}`;\n\n        if (typeof path.animate !== \"function\") {\n            path.style.strokeDashoffset = \"0\";\n            return;\n        }\n\n        const anim = path.animate([{ strokeDashoffset: len }, { strokeDashoffset: 0 }], {\n            duration: CHECKBOX_TICK_DRAW_MS,\n            delay: CHECKBOX_TICK_DELAY_MS,\n            easing: \"cubic-bezier(0.45, 0, 0.2, 1)\",\n            fill: \"forwards\",\n        });\n        return () => anim.cancel();\n    }, []);\n\n    return (\n        <svg aria-hidden=\"true\" width={pixelSize} height={pixelSize} viewBox=\"0 0 14 14\" fill=\"none\" className={cx(\"block\", className)}>\n            <path\n                ref={pathRef}\n                d=\"M2.33325 7L5.24992 9.91667L11.6666 3.5\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n            />\n        </svg>\n    );\n}\n\ninterface TagCheckboxProps {\n    size?: keyof typeof sizes;\n    className?: string;\n    isFocused?: boolean;\n    isSelected?: boolean;\n    isDisabled?: boolean;\n}\n\n/** Figma: _Tag checkbox (3308:406033) */\nexport const TagCheckbox = ({ className, isFocused, isSelected, isDisabled, size = \"sm\" }: TagCheckboxProps) => {\n    const { box, iconPixelSize } = sizes[size];\n\n    return (\n        <div\n            className={cx(\n                \"relative flex shrink-0 cursor-pointer appearance-none items-center justify-center overflow-clip border border-solid border-primary\",\n                box,\n                isSelected ? \"border-transparent bg-brand-solid\" : \"bg-primary\",\n                isDisabled && \"cursor-not-allowed opacity-50\",\n                isDisabled && !isSelected && \"bg-tertiary\",\n                isFocused && !isDisabled && focusRingShadow,\n                className,\n            )}\n        >\n            {isSelected && <TagCheckboxAnimatedCheckMark pixelSize={iconPixelSize} className=\"pointer-events-none text-fg-white\" />}\n        </div>\n    );\n};\nTagCheckbox.displayName = \"TagCheckbox\";\n","\"use client\";\n\nimport type { RefAttributes } from \"react\";\nimport { XIcon as XClose } from \"@phosphor-icons/react/dist/csr/X\";\nimport { Button as AriaButton, type ButtonProps as AriaButtonProps } from \"react-aria-components\";\nimport { cx } from \"@/utils/cx\";\n\n/**\n * Figma: _Tag close X (3307:417672)\n * Total hit target: sm 14px, md 16px, lg 20px (padding + icon).\n */\n\nconst focusShadowPlain =\n    \"focus-visible:outline-none focus-visible:[box-shadow:0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]\";\n\ninterface TagCloseXProps extends AriaButtonProps, RefAttributes<HTMLButtonElement> {\n    size?: \"sm\" | \"md\" | \"lg\";\n    className?: string;\n}\n\nconst styles = {\n    sm: { root: \"p-0.5\", icon: \"size-2.5\" },\n    md: { root: \"p-0.5\", icon: \"size-3\" },\n    lg: { root: \"p-[3px]\", icon: \"size-3.5\" },\n};\n\nexport const TagCloseX = ({ size = \"md\", className, ...otherProps }: TagCloseXProps) => {\n    return (\n        <AriaButton\n            slot=\"remove\"\n            aria-label=\"Remove this tag\"\n            className={cx(\n                \"flex cursor-pointer rounded-[3px] text-fg-quaternary outline-transparent transition duration-100 ease-linear hover:bg-primary_hover focus-visible:rounded-[3px] disabled:cursor-not-allowed disabled:opacity-50\",\n                focusShadowPlain,\n                styles[size].root,\n                className,\n            )}\n            {...otherProps}\n        >\n            <XClose className={cx(\"shrink-0 transition-inherit-all\", styles[size].icon)} />\n        </AriaButton>\n    );\n};\n","\"use client\";\n\n/** Figma: Tags (3306:403749) — shell uses border-primary + spread focus ring. */\n\nimport { type ImgHTMLAttributes, type PropsWithChildren, type RefAttributes, createContext, useContext, useState } from \"react\";\nimport { UserIcon as User01 } from \"@phosphor-icons/react/dist/csr/User\";\nimport {\n    Tag as AriaTag,\n    TagGroup as AriaTagGroup,\n    type TagGroupProps as AriaTagGroupProps,\n    TagList as AriaTagList,\n    type TagProps as AriaTagProps,\n} from \"react-aria-components\";\nimport { Dot } from \"@/components/foundations/dot-icon\";\nimport { cx } from \"@/utils/cx\";\nimport { TagCheckbox } from \"./base-components/tag-checkbox\";\nimport { TagCloseX } from \"./base-components/tag-close-x\";\n\nconst focusShadowPlain =\n    \"focus-visible:outline-none focus-visible:[box-shadow:0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]\";\n\nexport const TagAvatar = ({ src, alt, contrastBorder = true, className }: ImgHTMLAttributes<HTMLImageElement> & { contrastBorder?: boolean }) => {\n    const [isFailed, setIsFailed] = useState(false);\n\n    return (\n        <div\n            className={cx(\n                \"relative inline-flex size-4 shrink-0 items-center justify-center overflow-hidden rounded-full bg-tertiary\",\n                contrastBorder && \"outline-[0.5px] -outline-offset-[0.5px] outline-black/16\",\n                className,\n            )}\n        >\n            {src && !isFailed ? (\n                <img data-avatar-img className=\"size-full object-cover\" src={src} alt={alt} onError={() => setIsFailed(true)} />\n            ) : (\n                <User01 className=\"size-3 stroke-[2.25px] text-fg-quaternary\" />\n            )}\n        </div>\n    );\n};\n\nexport interface TagItem {\n    id: string;\n    label: string;\n    count?: number;\n    avatarSrc?: string;\n    avatarContrastBorder?: boolean;\n    dot?: boolean;\n    dotClassName?: string;\n    isDisabled?: boolean;\n    onClose?: (id: string) => void;\n}\n\nconst TagGroupContext = createContext<{\n    selectionMode: \"none\" | \"single\" | \"multiple\";\n    size: \"sm\" | \"md\" | \"lg\";\n}>({\n    selectionMode: \"none\",\n    size: \"sm\",\n});\n\ninterface TagGroupProps extends AriaTagGroupProps, RefAttributes<HTMLDivElement> {\n    label: string;\n    size?: \"sm\" | \"md\" | \"lg\";\n}\n\nexport const TagGroup = ({ label, selectionMode = \"none\", size = \"sm\", children, ...otherProps }: TagGroupProps) => {\n    return (\n        <TagGroupContext.Provider value={{ selectionMode, size }}>\n            <AriaTagGroup aria-label={label} selectionMode={selectionMode} disallowEmptySelection={selectionMode === \"single\"} {...otherProps}>\n                {children}\n            </AriaTagGroup>\n        </TagGroupContext.Provider>\n    );\n};\n\nexport const TagList = AriaTagList;\n\nconst styles = {\n    sm: {\n        root: {\n            base: \"px-2 py-0.75 text-xs font-medium\",\n            withCheckbox: \"pl-1.25\",\n            withAvatar: \"pl-1\",\n            withDot: \"pl-1.5\",\n            withCount: \"pr-1\",\n            withClose: \"pr-1\",\n        },\n        content: \"gap-1\",\n        count: \"px-1 text-xs font-medium\",\n    },\n    md: {\n        root: {\n            base: \"px-2.25 py-0.5 text-sm font-medium\",\n            withCheckbox: \"pl-1\",\n            withAvatar: \"pl-1.25\",\n            withDot: \"pl-1.75\",\n            withCount: \"pr-0.75\",\n            withClose: \"pr-1\",\n        },\n        content: \"gap-1.25\",\n        count: \"px-1.25 text-xs font-medium\",\n    },\n    lg: {\n        root: {\n            base: \"px-2.5 py-1 text-sm font-medium\",\n            withCheckbox: \"pl-1.25\",\n            withAvatar: \"pl-1.75\",\n            withDot: \"pl-2.25\",\n            withCount: \"pr-1\",\n            withClose: \"pr-1\",\n        },\n        content: \"gap-1.5\",\n        count: \"px-1.5 text-sm font-medium\",\n    },\n};\n\ninterface TagProps extends AriaTagProps, RefAttributes<object>, Omit<TagItem, \"label\" | \"id\"> {}\n\nexport const Tag = ({\n    id,\n    avatarSrc,\n    avatarContrastBorder = true,\n    dot,\n    dotClassName,\n    isDisabled,\n    count,\n    className,\n    children,\n    onClose,\n}: PropsWithChildren<TagProps>) => {\n    const context = useContext(TagGroupContext);\n\n    const leadingContent = avatarSrc ? (\n        <TagAvatar src={avatarSrc} alt=\"Avatar\" contrastBorder={avatarContrastBorder} />\n    ) : dot ? (\n        <Dot className={cx(\"text-fg-success-secondary\", dotClassName)} size=\"sm\" />\n    ) : null;\n\n    return (\n        <AriaTag\n            id={id}\n            isDisabled={isDisabled}\n            textValue={typeof children === \"string\" ? children : undefined}\n            className={(state) =>\n                cx(\n                    \"flex cursor-default items-center gap-0.75 rounded-md border border-solid border-primary bg-primary text-secondary transition duration-50 ease-linear\",\n                    focusShadowPlain,\n                    styles[context.size].root.base,\n\n                    // With avatar\n                    avatarSrc && styles[context.size].root.withAvatar,\n                    // With X button\n                    (onClose || state.allowsRemoving) && styles[context.size].root.withClose,\n                    // With dot\n                    dot && styles[context.size].root.withDot,\n                    // With count\n                    typeof count === \"number\" && styles[context.size].root.withCount,\n                    // With checkbox\n                    context.selectionMode !== \"none\" && cx(\"cursor-pointer\", styles[context.size].root.withCheckbox),\n                    // Disabled\n                    isDisabled && \"cursor-not-allowed\",\n\n                    typeof className === \"function\" ? className(state) : className,\n                )\n            }\n        >\n            {({ isSelected, isDisabled, allowsRemoving }) => (\n                <>\n                    <div className={cx(\"flex items-center gap-1\", styles[context.size].content)}>\n                        {context.selectionMode !== \"none\" && <TagCheckbox size={context.size} isSelected={isSelected} isDisabled={isDisabled} />}\n\n                        {leadingContent}\n\n                        {children}\n\n                        {typeof count === \"number\" && (\n                            <span className={cx(\"flex items-center justify-center rounded-[3px] bg-tertiary text-center\", styles[context.size].count)}>\n                                {count}\n                            </span>\n                        )}\n                    </div>\n\n                    {(onClose || allowsRemoving) && (\n                        <TagCloseX size={context.size} excludeFromTabOrder={allowsRemoving} onPress={() => id && onClose?.(id.toString())} />\n                    )}\n                </>\n            )}\n        </AriaTag>\n    );\n};\n"]}

package/dist/select-mobile-sheet-CB2ptDTJ.d.ts

@@ -0,0 +1,12 @@
+interface SelectMobileOptions {
+    /** When `false`, keep the floating menu on narrow viewports. Default `true`. */
+    sheet?: boolean;
+    /** Optional header title on the same row as the close control. */
+    title?: string;
+    /** Extra classes on the sheet panel (merged after base sheet styles). */
+    className?: string;
+    /** Extra classes on the scrollable body below the header. */
+    contentClassName?: string;
+}
+
+export type { SelectMobileOptions as S };

package/dist/{select-shared-B3Y5SMXU.d.ts → select-shared-oJEeJxeB.d.ts}

@@ -1,5 +1,6 @@
 import * as react from 'react';
 import { FC, ReactNode } from 'react';
+import { S as SelectMobileOptions } from './select-mobile-sheet-CB2ptDTJ.js';
 
 type SelectItemType = {
     /** Unique identifier for the item. */
@@ -31,6 +32,11 @@ interface CommonProps {
     placeholder?: string;
     /** Whether to hide the required indicator from the label. */
     hideRequiredIndicator?: boolean;
+    /**
+     * Narrow-viewport (≤1024px) bottom-sheet options for the menu.
+     * `sheet` defaults to `true` on viewports ≤1024px wide.
+     */
+    mobileOptions?: SelectMobileOptions;
 }
 declare const sizes: {
     sm: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@avenue-ticketing/ui",
-  "version": "0.12.0-beta.1",
+  "version": "0.12.0-beta.2",
   "description": "Avenue UI components for React (Untitled UI beta)",
   "license": "MIT",
   "repository": {

package/theme.css

@@ -369,7 +369,7 @@
     --color-bg-warning-solid: var(--color-yellow-600);
     --color-bg-success-solid: var(--color-green-600);
     --color-bg-secondary_hover: var(--color-neutral-100);
-    --color-bg-primary_hover: var(--color-neutral-50);
+    --color-bg-primary_hover: var(--color-neutral-100);
     --color-bg-brand-solid_hover: var(--color-brand-700);
     --color-bg-error-primary: var(--color-red-50);
     --color-bg-brand-secondary: var(--color-brand-100);