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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (58) hide show
  1. package/dist/react/badge-groups.js +2 -2
  2. package/dist/react/badge-groups.js.map +1 -1
  3. package/dist/react/badge.js +49 -18
  4. package/dist/react/badge.js.map +1 -1
  5. package/dist/react/button.js +2 -2
  6. package/dist/react/button.js.map +1 -1
  7. package/dist/react/combobox.js.map +1 -1
  8. package/dist/react/dropdown-account-breadcrumb.js.map +1 -1
  9. package/dist/react/dropdown-account-button.js +5 -5
  10. package/dist/react/dropdown-account-button.js.map +1 -1
  11. package/dist/react/dropdown-account-card-md.js +3 -3
  12. package/dist/react/dropdown-account-card-md.js.map +1 -1
  13. package/dist/react/dropdown-account-card-sm.js +3 -3
  14. package/dist/react/dropdown-account-card-sm.js.map +1 -1
  15. package/dist/react/dropdown-account-card-xs.js +3 -3
  16. package/dist/react/dropdown-account-card-xs.js.map +1 -1
  17. package/dist/react/dropdown-avatar.js +5 -5
  18. package/dist/react/dropdown-avatar.js.map +1 -1
  19. package/dist/react/dropdown-button-advanced.js +5 -5
  20. package/dist/react/dropdown-button-advanced.js.map +1 -1
  21. package/dist/react/dropdown-button-link.js +3 -3
  22. package/dist/react/dropdown-button-link.js.map +1 -1
  23. package/dist/react/dropdown-button-simple.js +5 -5
  24. package/dist/react/dropdown-button-simple.js.map +1 -1
  25. package/dist/react/dropdown-icon-advanced.js +3 -3
  26. package/dist/react/dropdown-icon-advanced.js.map +1 -1
  27. package/dist/react/dropdown-icon-simple.js +3 -3
  28. package/dist/react/dropdown-icon-simple.js.map +1 -1
  29. package/dist/react/dropdown-integration.js +5 -5
  30. package/dist/react/dropdown-integration.js.map +1 -1
  31. package/dist/react/dropdown-search-advanced.js +6 -6
  32. package/dist/react/dropdown-search-advanced.js.map +1 -1
  33. package/dist/react/dropdown-search-simple.js +6 -6
  34. package/dist/react/dropdown-search-simple.js.map +1 -1
  35. package/dist/react/dropdown.js +3 -3
  36. package/dist/react/dropdown.js.map +1 -1
  37. package/dist/react/input-date.js.map +1 -1
  38. package/dist/react/input-file.js +3 -3
  39. package/dist/react/input-file.js.map +1 -1
  40. package/dist/react/input-group.js.map +1 -1
  41. package/dist/react/input-number.js +2 -2
  42. package/dist/react/input-number.js.map +1 -1
  43. package/dist/react/input-payment.js +1 -1
  44. package/dist/react/input-payment.js.map +1 -1
  45. package/dist/react/input-tags-outer.js +1 -1
  46. package/dist/react/input-tags-outer.js.map +1 -1
  47. package/dist/react/input-tags.js.map +1 -1
  48. package/dist/react/input.js +1 -1
  49. package/dist/react/input.js.map +1 -1
  50. package/dist/react/multi-select.js +2 -2
  51. package/dist/react/multi-select.js.map +1 -1
  52. package/dist/react/select.js.map +1 -1
  53. package/dist/react/switch.js +1 -1
  54. package/dist/react/switch.js.map +1 -1
  55. package/dist/react/tag-select.js.map +1 -1
  56. package/dist/react/textarea.js.map +1 -1
  57. package/package.json +1 -1
  58. package/theme.css +2 -0
@@ -41,7 +41,7 @@ var ToggleBase = ({ className, isHovered, isDisabled, isFocusVisible, isSelected
41
41
  const classes = slim ? styles2.slim[size] : styles2.default[size];
42
42
  const offTrackBackground = (() => {
43
43
  if (isDisabled) return "bg-tertiary";
44
- if (isHovered) return "bg-secondary_hover";
44
+ if (isHovered) return "bg-toggle-track_hover";
45
45
  return "bg-quaternary";
46
46
  })();
47
47
  return /* @__PURE__ */ jsx(
@@ -1 +1 @@
1
- {"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 \"bg-secondary_hover\";\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"]}
1
+ {"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 \"bg-toggle-track_hover\";\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"]}