UNPKG

@heroui/theme

Version:

The default theme for HeroUI components

335 lines (322 loc) 9.41 kB
"use strict"; var __defProp = Object.defineProperty; var __getOwnPropDesc = Object.getOwnPropertyDescriptor; var __getOwnPropNames = Object.getOwnPropertyNames; var __hasOwnProp = Object.prototype.hasOwnProperty; var __export = (target, all) => { for (var name in all) __defProp(target, name, { get: all[name], enumerable: true }); }; var __copyProps = (to, from, except, desc) => { if (from && typeof from === "object" || typeof from === "function") { for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable }); } return to; }; var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod); // src/components/accordion.ts var accordion_exports = {}; __export(accordion_exports, { accordion: () => accordion, accordionItem: () => accordionItem }); module.exports = __toCommonJS(accordion_exports); // src/utils/tv.ts var import_tailwind_variants = require("tailwind-variants"); // src/utilities/transition.ts var DEFAULT_TRANSITION_DURATION = "250ms"; var transition_default = { /** * Transition utilities */ ".transition-background": { "transition-property": "background", "transition-timing-function": "ease", "transition-duration": DEFAULT_TRANSITION_DURATION }, ".transition-colors-opacity": { "transition-property": "color, background-color, border-color, text-decoration-color, fill, stroke, opacity", "transition-timing-function": "ease", "transition-duration": DEFAULT_TRANSITION_DURATION }, ".transition-width": { "transition-property": "width", "transition-timing-function": "ease", "transition-duration": DEFAULT_TRANSITION_DURATION }, ".transition-height": { "transition-property": "height", "transition-timing-function": "ease", "transition-duration": DEFAULT_TRANSITION_DURATION }, ".transition-size": { "transition-property": "width, height", "transition-timing-function": "ease", "transition-duration": DEFAULT_TRANSITION_DURATION }, ".transition-left": { "transition-property": "left", "transition-timing-function": "ease", "transition-duration": DEFAULT_TRANSITION_DURATION }, ".transition-transform-opacity": { "transition-property": "transform, scale, opacity rotate", "transition-timing-function": "ease", "transition-duration": DEFAULT_TRANSITION_DURATION }, ".transition-transform-background": { "transition-property": "transform, scale, background", "transition-timing-function": "ease", "transition-duration": DEFAULT_TRANSITION_DURATION }, ".transition-transform-colors": { "transition-property": "transform, scale, color, background, background-color, border-color, text-decoration-color, fill, stroke", "transition-timing-function": "ease", "transition-duration": DEFAULT_TRANSITION_DURATION }, ".transition-transform-colors-opacity": { "transition-property": "transform, scale, color, background, background-color, border-color, text-decoration-color, fill, stroke, opacity", "transition-timing-function": "ease", "transition-duration": DEFAULT_TRANSITION_DURATION } }; // src/utilities/custom.ts var custom_default = { /** * Custom utilities */ ".leading-inherit": { "line-height": "inherit" }, ".bg-img-inherit": { "background-image": "inherit" }, ".bg-clip-inherit": { "background-clip": "inherit" }, ".text-fill-inherit": { "-webkit-text-fill-color": "inherit" }, ".tap-highlight-transparent": { "-webkit-tap-highlight-color": "transparent" }, ".input-search-cancel-button-none": { "&::-webkit-search-cancel-button": { "-webkit-appearance": "none" } } }; // src/utilities/scrollbar-hide.ts var scrollbar_hide_default = { /** * Scroll Hide */ ".scrollbar-hide": { /* IE and Edge */ "-ms-overflow-style": "none", /* Firefox */ "scrollbar-width": "none", /* Safari and Chrome */ "&::-webkit-scrollbar": { display: "none" } }, ".scrollbar-default": { /* IE and Edge */ "-ms-overflow-style": "auto", /* Firefox */ "scrollbar-width": "auto", /* Safari and Chrome */ "&::-webkit-scrollbar": { display: "block" } } }; // src/utilities/text.ts var text_default = { /** * Text utilities */ ".text-tiny": { "font-size": "var(--heroui-font-size-tiny)", "line-height": "var(--heroui-line-height-tiny)" }, ".text-small": { "font-size": "var(--heroui-font-size-small)", "line-height": "var(--heroui-line-height-small)" }, ".text-medium": { "font-size": "var(--heroui-font-size-medium)", "line-height": "var(--heroui-line-height-medium)" }, ".text-large": { "font-size": "var(--heroui-font-size-large)", "line-height": "var(--heroui-line-height-large)" } }; // src/utilities/animation.ts var animation_default = { /** Animation Utilities */ ".spinner-bar-animation": { "animation-delay": "calc(-1.2s + (0.1s * var(--bar-index)))", transform: "rotate(calc(30deg * var(--bar-index)))translate(140%)" }, ".spinner-dot-animation": { "animation-delay": "calc(250ms * var(--dot-index))" }, ".spinner-dot-blink-animation": { "animation-delay": "calc(200ms * var(--dot-index))" } }; // src/utilities/index.ts var utilities = { ...custom_default, ...transition_default, ...scrollbar_hide_default, ...text_default, ...animation_default }; // src/utils/tw-merge-config.ts var COMMON_UNITS = ["small", "medium", "large"]; var twMergeConfig = { theme: { spacing: ["divider"], radius: COMMON_UNITS }, classGroups: { shadow: [{ shadow: COMMON_UNITS }], opacity: [{ opacity: ["disabled"] }], "font-size": [{ text: ["tiny", ...COMMON_UNITS] }], "border-w": [{ border: COMMON_UNITS }], "bg-image": [ "bg-stripe-gradient-default", "bg-stripe-gradient-primary", "bg-stripe-gradient-secondary", "bg-stripe-gradient-success", "bg-stripe-gradient-warning", "bg-stripe-gradient-danger" ], transition: Object.keys(utilities).filter((key) => key.includes(".transition")).map((key) => key.replace(".", "")) // remove the dot from the key, .transition-background -> transition-background } }; // src/utils/tv.ts var tv = (options, config) => { var _a, _b, _c; return (0, import_tailwind_variants.tv)(options, { ...config, twMerge: (_a = config == null ? void 0 : config.twMerge) != null ? _a : true, twMergeConfig: { ...config == null ? void 0 : config.twMergeConfig, theme: { ...(_b = config == null ? void 0 : config.twMergeConfig) == null ? void 0 : _b.theme, ...twMergeConfig.theme }, classGroups: { ...(_c = config == null ? void 0 : config.twMergeConfig) == null ? void 0 : _c.classGroups, ...twMergeConfig.classGroups } } }); }; // src/utils/classes.ts var dataFocusVisibleClasses = [ "outline-solid outline-transparent", "data-[focus-visible=true]:z-10", "data-[focus-visible=true]:outline-2", "data-[focus-visible=true]:outline-focus", "data-[focus-visible=true]:outline-offset-2" ]; // src/components/accordion.ts var accordion = tv({ base: "px-2", variants: { variant: { light: "", shadow: "px-4 shadow-medium rounded-medium bg-content1", bordered: "px-4 border-medium border-divider rounded-medium", splitted: "flex flex-col gap-2" }, fullWidth: { true: "w-full" } }, defaultVariants: { variant: "light", fullWidth: true } }); var accordionItem = tv({ slots: { base: "", heading: "", trigger: [ "flex py-4 w-full h-full gap-3 outline-solid outline-transparent items-center tap-highlight-transparent", // focus ring ...dataFocusVisibleClasses ], startContent: "shrink-0", indicator: "text-default-400", titleWrapper: "flex-1 flex flex-col text-start", title: "text-foreground text-medium", subtitle: "text-small text-foreground-500 font-normal", content: "py-2" }, variants: { variant: { splitted: { base: "px-4 bg-content1 shadow-medium rounded-medium" } }, isCompact: { true: { trigger: "py-2", title: "text-medium", subtitle: "text-small", indicator: "text-medium", content: "py-1" } }, isDisabled: { true: { base: "opacity-disabled pointer-events-none" } }, hideIndicator: { true: { indicator: "hidden" } }, disableAnimation: { true: { content: "hidden data-[open=true]:block" }, false: { indicator: "transition-transform", trigger: "transition-opacity" } }, disableIndicatorAnimation: { true: { indicator: "transition-none" }, false: { indicator: "rotate-0 data-[open=true]:-rotate-90 rtl:-rotate-180 rtl:data-[open=true]:-rotate-90" } } }, defaultVariants: { size: "md", radius: "lg", isDisabled: false, hideIndicator: false, disableIndicatorAnimation: false } }); // Annotate the CommonJS export names for ESM import in node: 0 && (module.exports = { accordion, accordionItem });