@nextui-org/theme 0.0.0-canary-20240429052129

package/dist/components/image.d.ts

@@ -0,0 +1,355 @@
+import * as tailwind_variants from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
+import * as tailwind_variants_dist_config from 'tailwind-variants/dist/config';
+
+/**
+ * Image wrapper **Tailwind Variants** component
+ *
+ * const {img, wrapper, blurredImg, zoomedWrapper} = image({...})
+ *
+ * @example
+ * <div className={wrapper()}>
+ *    <img alt="image" className={img())} src="https://..." />
+ *      // wrap the image if you want to zoom it
+ *      <div className={zoomedWrapper()}>
+ *       <img alt="image" className={img())} src="https://..." />
+ *     </div>
+ *    // duplicate it for the blur effect
+ *    <img alt="image" className={blurredImg())} src="https://..." />
+ * </div>
+ */
+declare const image: tailwind_variants.TVReturnType<{
+    radius: {
+        none: {};
+        sm: {};
+        md: {};
+        lg: {};
+        full: {};
+    };
+    shadow: {
+        none: {
+            wrapper: string;
+            img: string;
+        };
+        sm: {
+            wrapper: string;
+            img: string;
+        };
+        md: {
+            wrapper: string;
+            img: string;
+        };
+        lg: {
+            wrapper: string;
+            img: string;
+        };
+    };
+    isZoomed: {
+        true: {
+            img: string[];
+        };
+    };
+    showSkeleton: {
+        true: {
+            wrapper: string[];
+            img: string;
+        };
+    };
+    disableAnimation: {
+        true: {
+            img: string;
+        };
+        false: {
+            img: string;
+        };
+    };
+}, {
+    wrapper: string;
+    zoomedWrapper: string;
+    img: string;
+    blurredImg: string[];
+}, undefined, tailwind_variants_dist_config.TVConfig<{
+    radius: {
+        none: {};
+        sm: {};
+        md: {};
+        lg: {};
+        full: {};
+    };
+    shadow: {
+        none: {
+            wrapper: string;
+            img: string;
+        };
+        sm: {
+            wrapper: string;
+            img: string;
+        };
+        md: {
+            wrapper: string;
+            img: string;
+        };
+        lg: {
+            wrapper: string;
+            img: string;
+        };
+    };
+    isZoomed: {
+        true: {
+            img: string[];
+        };
+    };
+    showSkeleton: {
+        true: {
+            wrapper: string[];
+            img: string;
+        };
+    };
+    disableAnimation: {
+        true: {
+            img: string;
+        };
+        false: {
+            img: string;
+        };
+    };
+}, {
+    radius: {
+        none: {};
+        sm: {};
+        md: {};
+        lg: {};
+        full: {};
+    };
+    shadow: {
+        none: {
+            wrapper: string;
+            img: string;
+        };
+        sm: {
+            wrapper: string;
+            img: string;
+        };
+        md: {
+            wrapper: string;
+            img: string;
+        };
+        lg: {
+            wrapper: string;
+            img: string;
+        };
+    };
+    isZoomed: {
+        true: {
+            img: string[];
+        };
+    };
+    showSkeleton: {
+        true: {
+            wrapper: string[];
+            img: string;
+        };
+    };
+    disableAnimation: {
+        true: {
+            img: string;
+        };
+        false: {
+            img: string;
+        };
+    };
+}>, {
+    radius: {
+        none: {};
+        sm: {};
+        md: {};
+        lg: {};
+        full: {};
+    };
+    shadow: {
+        none: {
+            wrapper: string;
+            img: string;
+        };
+        sm: {
+            wrapper: string;
+            img: string;
+        };
+        md: {
+            wrapper: string;
+            img: string;
+        };
+        lg: {
+            wrapper: string;
+            img: string;
+        };
+    };
+    isZoomed: {
+        true: {
+            img: string[];
+        };
+    };
+    showSkeleton: {
+        true: {
+            wrapper: string[];
+            img: string;
+        };
+    };
+    disableAnimation: {
+        true: {
+            img: string;
+        };
+        false: {
+            img: string;
+        };
+    };
+}, {
+    wrapper: string;
+    zoomedWrapper: string;
+    img: string;
+    blurredImg: string[];
+}, tailwind_variants.TVReturnType<{
+    radius: {
+        none: {};
+        sm: {};
+        md: {};
+        lg: {};
+        full: {};
+    };
+    shadow: {
+        none: {
+            wrapper: string;
+            img: string;
+        };
+        sm: {
+            wrapper: string;
+            img: string;
+        };
+        md: {
+            wrapper: string;
+            img: string;
+        };
+        lg: {
+            wrapper: string;
+            img: string;
+        };
+    };
+    isZoomed: {
+        true: {
+            img: string[];
+        };
+    };
+    showSkeleton: {
+        true: {
+            wrapper: string[];
+            img: string;
+        };
+    };
+    disableAnimation: {
+        true: {
+            img: string;
+        };
+        false: {
+            img: string;
+        };
+    };
+}, {
+    wrapper: string;
+    zoomedWrapper: string;
+    img: string;
+    blurredImg: string[];
+}, undefined, tailwind_variants_dist_config.TVConfig<{
+    radius: {
+        none: {};
+        sm: {};
+        md: {};
+        lg: {};
+        full: {};
+    };
+    shadow: {
+        none: {
+            wrapper: string;
+            img: string;
+        };
+        sm: {
+            wrapper: string;
+            img: string;
+        };
+        md: {
+            wrapper: string;
+            img: string;
+        };
+        lg: {
+            wrapper: string;
+            img: string;
+        };
+    };
+    isZoomed: {
+        true: {
+            img: string[];
+        };
+    };
+    showSkeleton: {
+        true: {
+            wrapper: string[];
+            img: string;
+        };
+    };
+    disableAnimation: {
+        true: {
+            img: string;
+        };
+        false: {
+            img: string;
+        };
+    };
+}, {
+    radius: {
+        none: {};
+        sm: {};
+        md: {};
+        lg: {};
+        full: {};
+    };
+    shadow: {
+        none: {
+            wrapper: string;
+            img: string;
+        };
+        sm: {
+            wrapper: string;
+            img: string;
+        };
+        md: {
+            wrapper: string;
+            img: string;
+        };
+        lg: {
+            wrapper: string;
+            img: string;
+        };
+    };
+    isZoomed: {
+        true: {
+            img: string[];
+        };
+    };
+    showSkeleton: {
+        true: {
+            wrapper: string[];
+            img: string;
+        };
+    };
+    disableAnimation: {
+        true: {
+            img: string;
+        };
+        false: {
+            img: string;
+        };
+    };
+}>, unknown, unknown, undefined>>;
+type ImageVariantProps = VariantProps<typeof image>;
+type ImageSlots = keyof ReturnType<typeof image>;
+
+export { ImageSlots, ImageVariantProps, image };

package/dist/components/image.js

@@ -0,0 +1,183 @@
+"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/image.ts
+var image_exports = {};
+__export(image_exports, {
+  image: () => image
+});
+module.exports = __toCommonJS(image_exports);
+
+// src/utils/tv.ts
+var import_tailwind_variants = require("tailwind-variants");
+var COMMON_UNITS = ["small", "medium", "large"];
+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,
+        opacity: ["disabled"],
+        spacing: ["divider"],
+        borderWidth: COMMON_UNITS,
+        borderRadius: COMMON_UNITS
+      },
+      classGroups: {
+        ...(_c = config == null ? void 0 : config.twMergeConfig) == null ? void 0 : _c.classGroups,
+        shadow: [{ shadow: COMMON_UNITS }],
+        "font-size": [{ text: ["tiny", ...COMMON_UNITS] }],
+        "bg-image": ["bg-stripe-gradient"]
+      }
+    }
+  });
+};
+
+// src/components/image.ts
+var image = tv({
+  slots: {
+    wrapper: "relative shadow-black/5",
+    zoomedWrapper: "relative overflow-hidden rounded-inherit",
+    img: "relative z-10 opacity-0 shadow-black/5 data-[loaded=true]:opacity-100",
+    blurredImg: [
+      "absolute",
+      "z-0",
+      "inset-0",
+      "w-full",
+      "h-full",
+      "object-cover",
+      "filter",
+      "blur-lg",
+      "scale-105",
+      "saturate-150",
+      "opacity-30",
+      "translate-y-1"
+    ]
+  },
+  variants: {
+    radius: {
+      none: {},
+      sm: {},
+      md: {},
+      lg: {},
+      full: {}
+    },
+    shadow: {
+      none: {
+        wrapper: "shadow-none",
+        img: "shadow-none"
+      },
+      sm: {
+        wrapper: "shadow-small",
+        img: "shadow-small"
+      },
+      md: {
+        wrapper: "shadow-medium",
+        img: "shadow-medium"
+      },
+      lg: {
+        wrapper: "shadow-large",
+        img: "shadow-large"
+      }
+    },
+    isZoomed: {
+      true: {
+        img: ["object-cover", "transform", "hover:scale-125"]
+      }
+    },
+    showSkeleton: {
+      true: {
+        wrapper: [
+          "group",
+          "relative",
+          "overflow-hidden",
+          "bg-content3 dark:bg-content2",
+          "before:opacity-100",
+          "before:absolute",
+          "before:inset-0",
+          "before:-translate-x-full",
+          "before:animate-[shimmer_2s_infinite]",
+          "before:border-t",
+          "before:border-content4/30",
+          "before:bg-gradient-to-r",
+          "before:from-transparent",
+          "before:via-content4",
+          "dark:before:via-default-700/10",
+          "before:to-transparent",
+          "after:opacity-100",
+          "after:absolute",
+          "after:inset-0",
+          "after:-z-10",
+          "after:bg-content3",
+          "dark:after:bg-content2"
+        ],
+        img: "opacity-0"
+      }
+    },
+    disableAnimation: {
+      true: {
+        img: "transition-none"
+      },
+      false: {
+        img: "transition-transform-opacity motion-reduce:transition-none !duration-300"
+      }
+    }
+  },
+  defaultVariants: {
+    radius: "lg",
+    shadow: "none",
+    isZoomed: false,
+    isBlurred: false,
+    showSkeleton: false,
+    disableAnimation: false
+  },
+  compoundSlots: [
+    {
+      slots: ["wrapper", "img", "blurredImg", "zoomedWrapper"],
+      radius: "none",
+      class: "rounded-none"
+    },
+    {
+      slots: ["wrapper", "img", "blurredImg", "zoomedWrapper"],
+      radius: "full",
+      class: "rounded-full"
+    },
+    {
+      slots: ["wrapper", "img", "blurredImg", "zoomedWrapper"],
+      radius: "sm",
+      class: "rounded-small"
+    },
+    {
+      slots: ["wrapper", "img", "blurredImg", "zoomedWrapper"],
+      radius: "md",
+      class: "rounded-md"
+    },
+    {
+      slots: ["wrapper", "img", "blurredImg", "zoomedWrapper"],
+      radius: "lg",
+      class: "rounded-large"
+    }
+  ]
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  image
+});

package/dist/components/image.mjs

@@ -0,0 +1,7 @@
+import {
+  image
+} from "../chunk-LDBYFTHC.mjs";
+import "../chunk-GMMETTYU.mjs";
+export {
+  image
+};

package/dist/components/index.d.ts

@@ -0,0 +1,41 @@
+export { AvatarGroupSlots, AvatarGroupVariantProps, AvatarSlots, AvatarVariantProps, avatar, avatarGroup } from './avatar.js';
+export { CardReturnType, CardSlots, CardVariantProps, card } from './card.js';
+export { LinkVariantProps, link, linkAnchorClasses } from './link.js';
+export { UserSlots, user } from './user.js';
+export { ButtonGroupVariantProps, ButtonVariantProps, button, buttonGroup } from './button.js';
+export { drip } from './drip.js';
+export { SpinnerSlots, SpinnerVariantProps, spinner } from './spinner.js';
+export { CodeVariantProps, code } from './code.js';
+export { PopoverSlots, PopoverVariantProps, popover } from './popover.js';
+export { SnippetSlots, SnippetVariantProps, snippet } from './snippet.js';
+export { ChipSlots, ChipVariantProps, chip } from './chip.js';
+export { BadgeSlots, BadgeVariantProps, badge } from './badge.js';
+export { CheckboxGroupSlots, CheckboxSlots, CheckboxVariantProps, checkbox, checkboxGroup } from './checkbox.js';
+export { RadioGroupSlots, RadioSlots, RadioVariantProps, radio, radioGroup } from './radio.js';
+export { PaginationSlots, PaginationVariantProps, pagination } from './pagination.js';
+export { ToggleSlots, ToggleVariantProps, toggle } from './toggle.js';
+export { AccordionGroupVariantProps, AccordionItemSlots, AccordionItemVariantProps, accordion, accordionItem } from './accordion.js';
+export { ProgressSlots, ProgressVariantProps, progress } from './progress.js';
+export { CircularProgressSlots, CircularProgressVariantProps, circularProgress } from './circular-progress.js';
+export { InputSlots, InputVariantProps, input } from './input.js';
+export { DropdownItemSlots, DropdownItemVariantProps, DropdownSectionSlots, DropdownSectionVariantProps, dropdown, dropdownItem, dropdownMenu, dropdownSection } from './dropdown.js';
+export { ImageSlots, ImageVariantProps, image } from './image.js';
+export { ModalSlots, ModalVariantProps, modal } from './modal.js';
+export { NavbarSlots, NavbarVariantProps, navbar } from './navbar.js';
+export { TableReturnType, TableSlots, TableVariantProps, table } from './table.js';
+export { SpacerVariantProps, spacer } from './spacer.js';
+export { DividerVariantProps, divider } from './divider.js';
+export { KbdSlots, KbdVariantProps, kbd } from './kbd.js';
+export { TabsReturnType, TabsSlots, TabsVariantProps, tabs } from './tabs.js';
+export { SkeletonSlots, SkeletonVariantProps, skeleton } from './skeleton.js';
+export { SelectSlots, SelectVariantProps, select } from './select.js';
+export { MenuItemSlots as ListboxItemSlots, MenuItemVariantProps as ListboxItemVariantProps, MenuSectionSlots as ListboxSectionSlots, MenuSectionVariantProps as ListboxSectionVariantProps, MenuSlots as ListboxSlots, MenuVariantProps as ListboxVariantProps, MenuItemSlots, MenuItemVariantProps, MenuSectionSlots, MenuSectionVariantProps, MenuSlots, MenuVariantProps, menu as listbox, menuItem as listboxItem, menuSection as listboxSection, menu, menuItem, menuSection } from './menu.js';
+export { ScrollShadowVariantProps, scrollShadow } from './scroll-shadow.js';
+export { SliderSlots, SliderVariantProps, slider } from './slider.js';
+export { BreadcrumbItemSlots, BreadcrumbItemVariantProps, BreadcrumbsSlots, BreadcrumbsVariantProps, breadcrumbItem, breadcrumbs } from './breadcrumbs.js';
+export { AutocompleteSlots, AutocompleteVariantProps, autocomplete } from './autocomplete.js';
+export { CalendarReturnType, CalendarSlots, CalendarVariantProps, calendar } from './calendar.js';
+export { DateInputReturnType, DateInputSlots, DateInputVariantProps, dateInput } from './date-input.js';
+export { DatePickerReturnType, DatePickerSlots, DatePickerVariantProps, DateRangePickerReturnType, DateRangePickerSlots, DateRangePickerVariantProps, datePicker, dateRangePicker } from './date-picker.js';
+import 'tailwind-variants';
+import 'tailwind-variants/dist/config';