ekm-ui 0.0.4 → 0.0.6

package/src/navbar/navbar.tsx

@@ -0,0 +1,526 @@
+import {
+  Avatar,
+  Button,
+  Dropdown,
+  Navbar as FlowbiteNavbar,
+  Label,
+  TextInput,
+} from "flowbite-react";
+import { FC, useEffect } from "react";
+import {
+  HiArchive,
+  HiBell,
+  HiCog,
+  HiCurrencyDollar,
+  HiEye,
+  HiInbox,
+  HiLogout,
+  HiMenuAlt1,
+  HiOutlineTicket,
+  HiSearch,
+  HiShoppingBag,
+  HiUserCircle,
+  HiUsers,
+  HiViewGrid,
+  HiPlusSm,
+  HiX,
+} from "react-icons/hi";
+import { EkmLogo } from "../ekm-logo";
+
+type Props = {
+  onMenuButtonClick: () => void;
+  showCloseButton?: boolean;
+  avatarImg?: string;
+  avatarPlaceholderInitials?: string;
+};
+
+export function Navbar({
+  onMenuButtonClick,
+  showCloseButton,
+  avatarImg,
+  avatarPlaceholderInitials,
+}: Props) {
+  // Close Sidebar on page change on mobile
+  useEffect(() => {
+    if (showCloseButton) {
+      onMenuButtonClick();
+    }
+  }, [location]);
+
+  // Close Sidebar on mobile tap inside main content
+  useEffect(() => {
+    function handleMobileTapInsideMain(event: MouseEvent) {
+      const main = document.querySelector("main");
+      const isClickInsideMain = main?.contains(event.target as Node);
+
+      if (showCloseButton && isClickInsideMain) {
+        onMenuButtonClick();
+      }
+    }
+
+    document.addEventListener("mousedown", handleMobileTapInsideMain);
+    return () => {
+      document.removeEventListener("mousedown", handleMobileTapInsideMain);
+    };
+  }, []);
+
+  return (
+    <FlowbiteNavbar fluid className="border-b border-gray-200">
+      <div className="w-full lg:px-5 lg:pl-0">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center">
+            <FlowbiteNavbar.Brand href="https://ekm.com" target="_blank">
+              <EkmLogo className="mr-3" />
+            </FlowbiteNavbar.Brand>
+            <button
+              onClick={() => onMenuButtonClick()}
+              className="mr-3 cursor-pointer rounded p-2 text-gray-600 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white lg:inline"
+            >
+              <span className="sr-only">Toggle sidebar</span>
+              {showCloseButton ? (
+                <HiX className="h-6 w-6" />
+              ) : (
+                <HiMenuAlt1 className="h-6 w-6" />
+              )}
+            </button>
+            <form className="hidden md:block">
+              <Label htmlFor="search" className="sr-only">
+                Search
+              </Label>
+              <TextInput
+                icon={HiSearch}
+                id="search"
+                name="search"
+                placeholder="Search"
+                required
+                size={32}
+                type="search"
+              />
+            </form>
+          </div>
+          <div className="flex items-center lg:gap-3">
+            <div className="flex items-center">
+              <button className="cursor-pointer rounded p-2 text-gray-600 hover:bg-gray-100 hover:text-gray-900 focus:bg-gray-100 focus:ring-2 focus:ring-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:bg-gray-700 dark:focus:ring-gray-700 lg:hidden">
+                <span className="sr-only">Search</span>
+                <HiSearch className="h-6 w-6" />
+              </button>
+              <div>
+                <Button type="button" className="mr-3" size="xs">
+                  <HiPlusSm className="-ml-1 mr-1 h-5 w-5" /> Upgrade
+                </Button>
+              </div>
+              <NotificationBellDropdown />
+              <Dropdown
+                arrowIcon={false}
+                inline
+                label={
+                  <span className="mr-1 rounded-lg p-2 hover:bg-gray-100 dark:hover:bg-gray-700">
+                    <span className="sr-only">Notifications</span>
+                    <HiCog className="text-2xl text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white " />
+                  </span>
+                }
+              />
+            </div>
+            <div className="hidden lg:block">
+              <UserDropdown
+                img={avatarImg}
+                placeholderInitials={avatarPlaceholderInitials}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </FlowbiteNavbar>
+  );
+}
+
+const NotificationBellDropdown: FC = function () {
+  return (
+    <Dropdown
+      arrowIcon={false}
+      inline
+      label={
+        <span className="mr-2 rounded-lg p-2 hover:bg-gray-100 dark:hover:bg-gray-700">
+          <span className="sr-only">Notifications</span>
+          <HiBell className="text-2xl text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white " />
+        </span>
+      }
+    >
+      <div className="max-w-[24rem]">
+        <div className="block rounded-t-xl bg-gray-50 px-4 py-2 text-center text-base font-medium text-gray-700 dark:bg-gray-700 dark:text-gray-400">
+          Notifications
+        </div>
+        <div>
+          <a
+            href="#"
+            className="flex border-y px-4 py-3 hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-600"
+          >
+            <div className="shrink-0">
+              <img
+                alt=""
+                src="../images/users/bonnie-green.png"
+                className="h-11 w-11 rounded-full"
+              />
+              <div className="absolute -mt-5 ml-6 flex h-5 w-5 items-center justify-center rounded-full border border-white bg-primary-700 dark:border-gray-700">
+                <NewMessageIcon />
+              </div>
+            </div>
+            <div className="w-full pl-3">
+              <div className="mb-1.5 text-sm font-normal text-gray-500 dark:text-gray-400">
+                New message from&nbsp;
+                <span className="font-semibold text-gray-900 dark:text-white">
+                  Bonnie Green
+                </span>
+                : "Hey, what's up? All set for the presentation?"
+              </div>
+              <div className="text-xs font-medium text-primary-700 dark:text-primary-400">
+                a few moments ago
+              </div>
+            </div>
+          </a>
+          <a
+            href="#"
+            className="flex border-b px-4 py-3 hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-600"
+          >
+            <div className="shrink-0">
+              <img
+                alt=""
+                src="../images/users/jese-leos.png"
+                className="h-11 w-11 rounded-full"
+              />
+              <div className="absolute -mt-5 ml-6 flex h-5 w-5 items-center justify-center rounded-full border border-white bg-gray-900 dark:border-gray-700">
+                <NewFollowIcon />
+              </div>
+            </div>
+            <div className="w-full pl-3">
+              <div className="mb-1.5 text-sm font-normal text-gray-500 dark:text-gray-400">
+                <span className="font-semibold text-gray-900 dark:text-white">
+                  Jese Leos
+                </span>
+                &nbsp;and&nbsp;
+                <span className="font-medium text-gray-900 dark:text-white">
+                  5 others
+                </span>
+                &nbsp;started following you.
+              </div>
+              <div className="text-xs font-medium text-primary-700 dark:text-primary-400">
+                10 minutes ago
+              </div>
+            </div>
+          </a>
+          <a
+            href="#"
+            className="flex border-b px-4 py-3 hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-600"
+          >
+            <div className="shrink-0">
+              <img
+                alt=""
+                src="../images/users/joseph-mcfall.png"
+                className="h-11 w-11 rounded-full"
+              />
+              <div className="absolute -mt-5 ml-6 flex h-5 w-5 items-center justify-center rounded-full border border-white bg-red-600 dark:border-gray-700">
+                <NewLoveIcon />
+              </div>
+            </div>
+            <div className="w-full pl-3">
+              <div className="mb-1.5 text-sm font-normal text-gray-500 dark:text-gray-400">
+                <span className="font-semibold text-gray-900 dark:text-white">
+                  Joseph Mcfall
+                </span>
+                &nbsp;and&nbsp;
+                <span className="font-medium text-gray-900 dark:text-white">
+                  141 others
+                </span>
+                &nbsp;love your story. See it and view more stories.
+              </div>
+              <div className="text-xs font-medium text-primary-700 dark:text-primary-400">
+                44 minutes ago
+              </div>
+            </div>
+          </a>
+          <a
+            href="#"
+            className="flex border-b px-4 py-3 hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-600"
+          >
+            <div className="shrink-0">
+              <img
+                alt=""
+                src="../images/users/leslie-livingston.png"
+                className="h-11 w-11 rounded-full"
+              />
+              <div className="absolute -mt-5 ml-6 flex h-5 w-5 items-center justify-center rounded-full border border-white bg-green-400 dark:border-gray-700">
+                <NewMentionIcon />
+              </div>
+            </div>
+            <div className="w-full pl-3">
+              <div className="mb-1.5 text-sm font-normal text-gray-500 dark:text-gray-400">
+                <span className="font-semibold text-gray-900 dark:text-white">
+                  Leslie Livingston
+                </span>
+                &nbsp;mentioned you in a comment:&nbsp;
+                <span className="font-medium text-primary-700 dark:text-primary-500">
+                  @bonnie.green
+                </span>
+                &nbsp;what do you say?
+              </div>
+              <div className="text-xs font-medium text-primary-700 dark:text-primary-400">
+                1 hour ago
+              </div>
+            </div>
+          </a>
+          <a
+            href="#"
+            className="flex px-4 py-3 hover:bg-gray-100 dark:hover:bg-gray-600"
+          >
+            <div className="shrink-0">
+              <img
+                alt=""
+                src="../images/users/robert-brown.png"
+                className="h-11 w-11 rounded-full"
+              />
+              <div className="absolute -mt-5 ml-6 flex h-5 w-5 items-center justify-center rounded-full border border-white bg-purple-500 dark:border-gray-700">
+                <NewVideoIcon />
+              </div>
+            </div>
+            <div className="w-full pl-3">
+              <div className="mb-1.5 text-sm font-normal text-gray-500 dark:text-gray-400">
+                <span className="font-semibold text-gray-900 dark:text-white">
+                  Robert Brown
+                </span>
+                &nbsp;posted a new video: Glassmorphism - learn how to implement
+                the new design trend.
+              </div>
+              <div className="text-xs font-medium text-primary-700 dark:text-primary-400">
+                3 hours ago
+              </div>
+            </div>
+          </a>
+        </div>
+        <a
+          href="#"
+          className="block rounded-b-xl bg-gray-50 py-2 text-center text-base font-normal text-gray-900 hover:bg-gray-100 dark:bg-gray-700 dark:text-white dark:hover:underline"
+        >
+          <div className="inline-flex items-center gap-x-2">
+            <HiEye className="h-6 w-6" />
+            <span>View all</span>
+          </div>
+        </a>
+      </div>
+    </Dropdown>
+  );
+};
+
+const NewMessageIcon: FC = function () {
+  return (
+    <svg
+      className="h-3 w-3 text-white"
+      fill="currentColor"
+      viewBox="0 0 20 20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M8.707 7.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l2-2a1 1 0 00-1.414-1.414L11 7.586V3a1 1 0 10-2 0v4.586l-.293-.293z"></path>
+      <path d="M3 5a2 2 0 012-2h1a1 1 0 010 2H5v7h2l1 2h4l1-2h2V5h-1a1 1 0 110-2h1a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2V5z"></path>
+    </svg>
+  );
+};
+
+const NewFollowIcon: FC = function () {
+  return (
+    <svg
+      className="h-3 w-3 text-white"
+      fill="currentColor"
+      viewBox="0 0 20 20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M8 9a3 3 0 100-6 3 3 0 000 6zM8 11a6 6 0 016 6H2a6 6 0 016-6zM16 7a1 1 0 10-2 0v1h-1a1 1 0 100 2h1v1a1 1 0 102 0v-1h1a1 1 0 100-2h-1V7z"></path>
+    </svg>
+  );
+};
+
+const NewLoveIcon: FC = function () {
+  return (
+    <svg
+      className="h-3 w-3 text-white"
+      fill="currentColor"
+      viewBox="0 0 20 20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"
+        clipRule="evenodd"
+      ></path>
+    </svg>
+  );
+};
+
+const NewMentionIcon: FC = function () {
+  return (
+    <svg
+      className="h-3 w-3 text-white"
+      fill="currentColor"
+      viewBox="0 0 20 20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        d="M18 13V5a2 2 0 00-2-2H4a2 2 0 00-2 2v8a2 2 0 002 2h3l3 3 3-3h3a2 2 0 002-2zM5 7a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1zm1 3a1 1 0 100 2h3a1 1 0 100-2H6z"
+        clipRule="evenodd"
+      ></path>
+    </svg>
+  );
+};
+
+const NewVideoIcon: FC = function () {
+  return (
+    <svg
+      className="h-3 w-3 text-white"
+      fill="currentColor"
+      viewBox="0 0 20 20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M2 6a2 2 0 012-2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894l2 1A1 1 0 0018 13V7a1 1 0 00-1.447-.894l-2 1z"></path>
+    </svg>
+  );
+};
+
+const AppDrawerDropdown: FC = function () {
+  return (
+    <Dropdown
+      arrowIcon={false}
+      inline
+      label={
+        <span className="rounded-lg p-2 hover:bg-gray-100 dark:hover:bg-gray-700">
+          <span className="sr-only">Apps</span>
+          <HiViewGrid className="text-2xl text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white" />
+        </span>
+      }
+    >
+      <div className="block rounded-t-lg border-b bg-gray-50 px-4 py-2 text-center text-base font-medium text-gray-700 dark:border-b-gray-600 dark:bg-gray-700 dark:text-white">
+        Apps
+      </div>
+      <div className="grid grid-cols-3 gap-4 p-4">
+        <a
+          href="#"
+          className="block rounded-lg p-4 text-center hover:bg-gray-100 dark:hover:bg-gray-600"
+        >
+          <HiShoppingBag className="mx-auto mb-1 h-7 w-7 text-gray-500 dark:text-white" />
+          <div className="text-sm font-medium text-gray-900 dark:text-white">
+            Sales
+          </div>
+        </a>
+        <a
+          href="#"
+          className="block rounded-lg p-4 text-center hover:bg-gray-100 dark:hover:bg-gray-600"
+        >
+          <HiUsers className="mx-auto mb-1 h-7 w-7 text-gray-500 dark:text-white" />
+          <div className="text-sm font-medium text-gray-900 dark:text-white">
+            Users
+          </div>
+        </a>
+        <a
+          href="#"
+          className="block rounded-lg p-4 text-center hover:bg-gray-100 dark:hover:bg-gray-600"
+        >
+          <HiInbox className="mx-auto mb-1 h-7 w-7 text-gray-500 dark:text-white" />
+          <div className="text-sm font-medium text-gray-900 dark:text-white">
+            Inbox
+          </div>
+        </a>
+        <a
+          href="#"
+          className="block rounded-lg p-4 text-center hover:bg-gray-100 dark:hover:bg-gray-600"
+        >
+          <HiUserCircle className="mx-auto mb-1 h-7 w-7 text-gray-500 dark:text-white" />
+          <div className="text-sm font-medium text-gray-900 dark:text-white">
+            Profile
+          </div>
+        </a>
+        <a
+          href="#"
+          className="block rounded-lg p-4 text-center hover:bg-gray-100 dark:hover:bg-gray-600"
+        >
+          <HiCog className="mx-auto mb-1 h-7 w-7 text-gray-500 dark:text-white" />
+          <div className="text-sm font-medium text-gray-900 dark:text-white">
+            Settings
+          </div>
+        </a>
+        <a
+          href="#"
+          className="block rounded-lg p-4 text-center hover:bg-gray-100 dark:hover:bg-gray-600"
+        >
+          <HiArchive className="mx-auto mb-1 h-7 w-7 text-gray-500 dark:text-white" />
+          <div className="text-sm font-medium text-gray-900 dark:text-white">
+            Products
+          </div>
+        </a>
+        <a
+          href="#"
+          className="block rounded-lg p-4 text-center hover:bg-gray-100 dark:hover:bg-gray-600"
+        >
+          <HiCurrencyDollar className="mx-auto mb-1 h-7 w-7 text-gray-500 dark:text-white" />
+          <div className="text-sm font-medium text-gray-900 dark:text-white">
+            Pricing
+          </div>
+        </a>
+        <a
+          href="#"
+          className="block rounded-lg p-4 text-center hover:bg-gray-100 dark:hover:bg-gray-600"
+        >
+          <HiOutlineTicket className="mx-auto mb-1 h-7 w-7 text-gray-500 dark:text-white" />
+          <div className="text-sm font-medium text-gray-900 dark:text-white">
+            Billing
+          </div>
+        </a>
+        <a
+          href="#"
+          className="block rounded-lg p-4 text-center hover:bg-gray-100 dark:hover:bg-gray-600"
+        >
+          <HiLogout className="mx-auto mb-1 h-7 w-7 text-gray-500 dark:text-white" />
+          <div className="text-sm font-medium text-gray-900 dark:text-white">
+            Logout
+          </div>
+        </a>
+      </div>
+    </Dropdown>
+  );
+};
+
+function UserDropdown({
+  img,
+  placeholderInitials,
+}: {
+  img?: string;
+  placeholderInitials?: string;
+}) {
+  return (
+    <Dropdown
+      arrowIcon={false}
+      inline
+      label={
+        <span>
+          <span className="sr-only">User menu</span>
+          <Avatar
+            alt=""
+            img={img}
+            placeholderInitials={placeholderInitials}
+            rounded
+            size="sm"
+          />
+        </span>
+      }
+    >
+      <Dropdown.Header>
+        <span className="block text-sm">Neil Sims</span>
+        <span className="block truncate text-sm font-medium">
+          neil.sims@flowbite.com
+        </span>
+      </Dropdown.Header>
+      <Dropdown.Item>Dashboard</Dropdown.Item>
+      <Dropdown.Item>Settings</Dropdown.Item>
+      <Dropdown.Item>Earnings</Dropdown.Item>
+      <Dropdown.Divider />
+      <Dropdown.Item>Sign out</Dropdown.Item>
+    </Dropdown>
+  );
+}

package/src/sidebar/sidebar.tsx

@@ -0,0 +1,48 @@
+import classNames from "classnames";
+import { Sidebar as FlowbiteSidebar, TextInput } from "flowbite-react";
+import { HiSearch } from "react-icons/hi";
+
+import isSmallScreen from "../helpers/is-small-screen";
+
+type Props = {
+  collapsed?: boolean;
+  children: React.ReactNode;
+};
+
+export function Sidebar({ children, collapsed }: Props) {
+  return (
+    <div
+      className={classNames("bg-gray-50 px-2.5 lg:!block", {
+        hidden: !collapsed,
+      })}
+    >
+      <FlowbiteSidebar
+        aria-label="EKM application sidebar"
+        collapsed={collapsed && !isSmallScreen()}
+        theme={{
+          root: {
+            collapsed: {
+              on: "w-10",
+            },
+            inner: "bg-gray-50",
+          },
+        }}
+      >
+        <div className="flex h-full flex-col justify-between bg-gray-50 py-4">
+          <div>
+            <form className="pb-3 md:hidden">
+              <TextInput
+                icon={HiSearch}
+                type="search"
+                placeholder="Search"
+                required
+                size={32}
+              />
+            </form>
+            {children}
+          </div>
+        </div>
+      </FlowbiteSidebar>
+    </div>
+  );
+}

package/tsconfig.json

@@ -1,5 +1,8 @@
 {
   "extends": "tsconfig/react-library.json",
   "include": ["."],
+  "compilerOptions": {
+    "lib": ["dom"]
+  },
   "exclude": ["dist", "build", "node_modules"]
 }

package/dist/Button.d.ts

@@ -1,22 +0,0 @@
-/**
- * Utility type to infer the first argument of a variantProps function.
- */
-type VariantPropsOf<T> = T extends (props: infer P) => any ? P : never;
-
-declare const buttonProps: <P extends {} & {
-    color?: "default" | "primary" | "warning" | "danger" | undefined;
-    size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
-    disabled?: boolean | undefined;
-    type?: "outline" | "solid" | "link" | undefined;
-} & {
-    className?: string | undefined;
-}>(props: P) => {
-    className: string;
-} & Omit<P, "color" | "size" | "disabled" | "type">;
-type Props = JSX.IntrinsicElements["button"] & VariantPropsOf<typeof buttonProps>;
-declare function Button(props: Props): JSX.Element;
-declare namespace Button {
-    var displayName: string;
-}
-
-export { Button };

package/dist/Button.mjs

@@ -1,3 +0,0 @@
-export { a as Button } from './chunk-57QDDOX4.mjs';
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=Button.mjs.map

package/dist/chunk-57QDDOX4.mjs

@@ -1,8 +0,0 @@
-import 'react';
-import { jsx } from 'react/jsx-runtime';
-
-var x=Object.defineProperty;var m=Object.getOwnPropertySymbols;var v=Object.prototype.hasOwnProperty,C=Object.prototype.propertyIsEnumerable;var c=(t,n,e)=>n in t?x(t,n,{enumerable:!0,configurable:!0,writable:!0,value:e}):t[n]=e,d=(t,n)=>{for(var e in n||(n={}))v.call(n,e)&&c(t,e,n[e]);if(m)for(var e of m(n))C.call(n,e)&&c(t,e,n[e]);return t};function b(t){let{base:n,variants:e,compoundVariants:s,defaultVariants:i}=t,u=p=>{let r=e==null?void 0:e[p];return r&&("false"in r||"true"in r)};return p=>{var f;let r=[n],V=a=>{var o,l;return (l=(o=p[a])!=null?o:i==null?void 0:i[a])!=null?l:u(a)?!1:void 0};for(let a in e){let o=V(a);o!==void 0&&r.push((f=e[a])==null?void 0:f[o]);}for(let{variants:a,className:o}of s!=null?s:[]){let l=y=>V(y)===a[y];Object.keys(a).every(l)&&r.push(o);}return r.filter(Boolean).join(" ")}}function g(t){let n=b(t);return e=>{let s={};for(let i in e)t.variants&&!(i in t.variants)&&(s[i]=e[i]);return s.className=[e.className,n(e)].filter(Boolean).join(" "),s}}var O=g({base:"rounded-full font-semibold focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2",variants:{color:{default:"focus-visible:outline-indigo-600",primary:"focus-visible:outline-green-600",warning:"focus-visible:outline-orange-600",danger:"focus-visible:outline-red-600"},size:{xs:"px-2.5 py-1 text-xs",sm:"px-2.5 py-1 text-sm",md:"px-3 py-1.5 text-sm",lg:"px-3.5 py-2 text-sm",xl:"px-4 py-2.5 text-sm"},disabled:{true:"cursor-not-allowed opacity-50"},type:{outline:"ring-1 ring-inset bg-white shadow-sm",solid:"text-white shadow-sm",link:"hover:underline bg-white"}},compoundVariants:[{variants:{color:"default",type:"solid"},className:"bg-indigo-600 hover:bg-indigo-500"},{variants:{color:"primary",type:"solid"},className:"bg-green-600 hover:bg-green-500"},{variants:{color:"warning",type:"solid"},className:"bg-orange-600 hover:bg-orange-500"},{variants:{color:"danger",type:"solid"},className:"bg-red-600 hover:bg-red-500"},{variants:{color:"default",type:"outline"},className:"text-indigo-600 ring-indigo-600 hover:bg-indigo-50"},{variants:{color:"primary",type:"outline"},className:"ring-green-600 hover:bg-green-50"},{variants:{color:"warning",type:"outline"},className:"ring-orange-600 hover:bg-orange-50"},{variants:{color:"danger",type:"outline"},className:"ring-red-600 hover:bg-red-50"},{variants:{color:"default",type:"link"},className:"text-indigo-600"},{variants:{color:"primary",type:"link"},className:"ring-green-600"},{variants:{color:"warning",type:"link"},className:"ring-orange-600"},{variants:{color:"danger",type:"link"},className:"ring-red-600"}],defaultVariants:{color:"default",size:"md",disabled:!1,type:"solid"}});function P(t){return jsx("button",d({},O(t)))}P.displayName="Button";
-
-export { P as a };
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-57QDDOX4.mjs.map

package/dist/chunk-57QDDOX4.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/variants.ts","../src/Button.tsx"],"names":["createElement","forwardRef","variants","config","base","compoundVariants","defaultVariants","isBooleanVariant","name","v","props","_a","res","getSelected","_b","selected","className","isSelected","variantProps","variantClassName","result","prop","jsx","buttonProps","Button","__spreadValues"],"mappings":"yVACA,OAAS,iBAAAA,EAAe,cAAAC,MAAkB,QAuInC,SAASC,EAGdC,EAAqB,CACrB,GAAM,CAAE,KAAAC,EAAM,SAAAF,EAAU,iBAAAG,EAAkB,gBAAAC,CAAgB,EAAIH,EAExDI,EAAoBC,GAAkB,CAC1C,IAAMC,EAAIP,GAAA,YAAAA,EAAWM,GACrB,OAAOC,IAAM,UAAWA,GAAK,SAAUA,EACzC,EAEA,OAAQC,GAA6B,CAnJvC,IAAAC,EAoJI,IAAMC,EAAM,CAACR,CAAI,EAEXS,EAAeL,GAAe,CAtJxC,IAAAG,EAAAG,EAuJO,OAAAA,GAAAH,EAAAD,EAAcF,CAAI,IAAlB,KAAAG,EACDL,GAAA,YAAAA,EAAkBE,KADjB,KAAAM,EAEAP,EAAiBC,CAAI,EAAI,GAAQ,QAEpC,QAASA,KAAQN,EAAU,CACzB,IAAMa,EAAWF,EAAYL,CAAI,EAC7BO,IAAa,QAAWH,EAAI,MAAKD,EAAAT,EAASM,CAAI,IAAb,YAAAG,EAAiBI,EAAS,EAGjE,OAAS,CAAE,SAAAb,EAAU,UAAAc,CAAU,IAAKX,GAAA,KAAAA,EAAoB,CAAC,EAAG,CAC1D,IAAMY,EAAcT,GAAiBK,EAAYL,CAAI,IAAMN,EAASM,CAAI,EACpE,OAAO,KAAKN,CAAQ,EAAE,MAAMe,CAAU,GACxCL,EAAI,KAAKI,CAAS,EAGtB,OAAOJ,EAAI,OAAO,OAAO,EAAE,KAAK,GAAG,CACrC,CACF,CAeO,SAASM,EAGdf,EAAqB,CACrB,IAAMgB,EAAmBjB,EAAYC,CAAM,EAC3C,OAAmCO,GAAa,CAC9C,IAAMU,EAAc,CAAC,EAGrB,QAASC,KAAQX,EACXP,EAAO,UAAY,EAAEkB,KAAQlB,EAAO,YACtCiB,EAAOC,CAAI,EAAIX,EAAMW,CAAI,GAK7B,OAAAD,EAAO,UAAY,CAACV,EAAM,UAAWS,EAAiBT,CAAK,CAAC,EACzD,OAAO,OAAO,EACd,KAAK,GAAG,EAEJU,CACT,CACF,CC/ES,cAAAE,MAAA,oBA3HT,IAAMC,EAAcL,EAAa,CAC/B,KAAM,0GACN,SAAU,CACR,MAAO,CACL,QAAS,mCACT,QAAS,kCACT,QAAS,mCACT,OAAQ,+BACV,EACA,KAAM,CACJ,GAAI,sBACJ,GAAI,sBACJ,GAAI,sBACJ,GAAI,sBACJ,GAAI,qBACN,EACA,SAAU,CACR,KAAM,+BACR,EACA,KAAM,CACJ,QAAS,uCACT,MAAO,uBACP,KAAM,0BACR,CACF,EACA,iBAAkB,CAChB,CACE,SAAU,CACR,MAAO,UACP,KAAM,OACR,EACA,UAAW,mCACb,EACA,CACE,SAAU,CACR,MAAO,UACP,KAAM,OACR,EACA,UAAW,iCACb,EACA,CACE,SAAU,CACR,MAAO,UACP,KAAM,OACR,EACA,UAAW,mCACb,EACA,CACE,SAAU,CACR,MAAO,SACP,KAAM,OACR,EACA,UAAW,6BACb,EACA,CACE,SAAU,CACR,MAAO,UACP,KAAM,SACR,EACA,UAAW,oDACb,EACA,CACE,SAAU,CACR,MAAO,UACP,KAAM,SACR,EACA,UAAW,kCACb,EACA,CACE,SAAU,CACR,MAAO,UACP,KAAM,SACR,EACA,UAAW,oCACb,EACA,CACE,SAAU,CACR,MAAO,SACP,KAAM,SACR,EACA,UAAW,8BACb,EACA,CACE,SAAU,CACR,MAAO,UACP,KAAM,MACR,EACA,UAAW,iBACb,EACA,CACE,SAAU,CACR,MAAO,UACP,KAAM,MACR,EACA,UAAW,gBACb,EACA,CACE,SAAU,CACR,MAAO,UACP,KAAM,MACR,EACA,UAAW,iBACb,EACA,CACE,SAAU,CACR,MAAO,SACP,KAAM,MACR,EACA,UAAW,cACb,CACF,EACA,gBAAiB,CACf,MAAO,UACP,KAAM,KACN,SAAU,GACV,KAAM,OACR,CACF,CAAC,EAKM,SAASM,EAAOd,EAAc,CACnC,OAAOY,EAAC,SAAAG,EAAA,GAAWF,EAAYb,CAAK,EAAG,CACzC,CAGAc,EAAO,YAAc","sourcesContent":["import type { ComponentProps, ElementType, ReactElement, Ref } from \"react\";\nimport { createElement, forwardRef } from \"react\";\n\n/**\n * Definition of the available variants and their options.\n * @example\n * {\n *   color: {\n *     white: \"bg-white\"\n *     green: \"bg-green-500\",\n *   },\n *   size: {\n *     small: \"text-xs\",\n *     large: \"text-lg\"\n *   }\n * }\n */\nexport type Variants = Record<string, Record<string, string>>;\n\n/**\n * Configuration including defaults and compound variants.\n */\nexport interface VariantsConfig<V extends Variants> {\n  base?: string;\n  variants: V;\n  compoundVariants?: CompoundVariant<V>[];\n  defaultVariants?: Partial<OptionsOf<V>>;\n}\n\n/**\n * Rules for class names that are applied for certain variant combinations.\n */\nexport interface CompoundVariant<V extends Variants> {\n  variants: Partial<OptionsOf<V>>;\n  className: string;\n}\n\n/**\n * Only the boolean variants, i.e. ones that have \"true\" or \"false\" as options.\n */\ntype BooleanVariants<V extends Variants> = {\n  [K in keyof V as V[K] extends { true: any } | { false: any }\n    ? K\n    : never]: V[K];\n};\n\n/**\n * Only the variants for which a default options is set.\n */\ntype DefaultVariants<\n  C extends VariantsConfig<V>,\n  V extends Variants = C[\"variants\"]\n> = {\n  [K in keyof V as K extends keyof C[\"defaultVariants\"]\n    ? K\n    : never]: C[\"variants\"][K];\n};\n\n/**\n * Names of all optional variants, i.e. booleans or ones with default options.\n */\ntype OptionalVariantNames<\n  C extends VariantsConfig<V>,\n  V extends Variants = C[\"variants\"]\n> = keyof BooleanVariants<V> | keyof DefaultVariants<C>;\n\n/**\n * Possible options for all the optional variants.\n *\n * @example\n * {\n *   color?: \"white\" | \"green\",\n *   rounded?: boolean | undefined\n * }\n */\ntype OptionalOptions<\n  C extends VariantsConfig<V>,\n  V extends Variants = C[\"variants\"]\n> = {\n  [K in keyof V as K extends OptionalVariantNames<C>\n    ? K\n    : never]?: OptionsOf<V>[K];\n};\n\n/**\n * Possible options for all required variants.\n *\n * @example {\n *   size: \"small\" | \"large\"\n * }\n */\ntype RequiredOptions<\n  C extends VariantsConfig<V>,\n  V extends Variants = C[\"variants\"]\n> = {\n  [K in keyof V as K extends OptionalVariantNames<C>\n    ? never\n    : K]: OptionsOf<V>[K];\n};\n\n/**\n * Utility type to extract the possible options.\n * Converts \"true\" | \"false\" options into booleans.\n *\n * @example\n * OptionsOf<{\n *   size: { small: \"text-xs\"; large: \"text-lg\" };\n *   rounded: { true: \"rounded-full\" }\n * }>\n * ==>\n * {\n *   size: \"text-xs\" | \"text-lg\";\n *   rounded: boolean;\n * }\n */\ntype OptionsOf<V extends Variants> = {\n  [K in keyof V]: keyof V[K] extends \"true\" | \"false\" ? boolean : keyof V[K];\n};\n\n/**\n * Extracts the possible options.\n */\nexport type VariantOptions<\n  C extends VariantsConfig<V>,\n  V extends Variants = C[\"variants\"]\n> = RequiredOptions<C> & OptionalOptions<C>;\n\n/**\n * Without this conversion step, defaultVariants and compoundVariants will\n * allow extra keys, i.e. non-existent variants.\n * See https://github.com/sindresorhus/type-fest/blob/main/source/simplify.d.ts\n */\nexport type Simplify<T> = {\n  [K in keyof T]: T[K];\n};\n\nexport function variants<\n  C extends VariantsConfig<V>,\n  V extends Variants = C[\"variants\"]\n>(config: Simplify<C>) {\n  const { base, variants, compoundVariants, defaultVariants } = config;\n\n  const isBooleanVariant = (name: keyof V) => {\n    const v = variants?.[name];\n    return v && (\"false\" in v || \"true\" in v);\n  };\n\n  return (props: VariantOptions<C>) => {\n    const res = [base];\n\n    const getSelected = (name: keyof V) =>\n      (props as any)[name] ??\n      defaultVariants?.[name] ??\n      (isBooleanVariant(name) ? false : undefined);\n\n    for (let name in variants) {\n      const selected = getSelected(name);\n      if (selected !== undefined) res.push(variants[name]?.[selected]);\n    }\n\n    for (let { variants, className } of compoundVariants ?? []) {\n      const isSelected = (name: string) => getSelected(name) === variants[name];\n      if (Object.keys(variants).every(isSelected)) {\n        res.push(className);\n      }\n    }\n    return res.filter(Boolean).join(\" \");\n  };\n}\n\n/**\n * Utility type to infer the first argument of a variantProps function.\n */\nexport type VariantPropsOf<T> = T extends (props: infer P) => any ? P : never;\n\n/**\n * Type for the variantProps() argument – consists of the VariantOptions and an optional className for chaining.\n */\ntype VariantProps<\n  C extends VariantsConfig<V>,\n  V extends Variants = C[\"variants\"]\n> = VariantOptions<C> & { className?: string };\n\nexport function variantProps<\n  C extends VariantsConfig<V>,\n  V extends Variants = C[\"variants\"]\n>(config: Simplify<C>) {\n  const variantClassName = variants<C>(config);\n  return <P extends VariantProps<C>>(props: P) => {\n    const result: any = {};\n\n    // Pass-through all unrelated props\n    for (let prop in props) {\n      if (config.variants && !(prop in config.variants)) {\n        result[prop] = props[prop];\n      }\n    }\n\n    // Add the optionally passed className prop for chaining\n    result.className = [props.className, variantClassName(props)]\n      .filter(Boolean)\n      .join(\" \");\n\n    return result as { className: string } & Omit<P, keyof C[\"variants\"]>;\n  };\n}\n\ntype AsProps<T extends ElementType = ElementType> = {\n  as?: T;\n};\n\ntype PolymorphicComponentProps<T extends ElementType> = AsProps<T> &\n  Omit<ComponentProps<T>, \"as\">;\n\nexport function styled<\n  T extends ElementType,\n  C extends VariantsConfig<V>,\n  V extends Variants = C[\"variants\"]\n>(type: T, config: string | Simplify<C>) {\n  const styledProps =\n    typeof config === \"string\"\n      ? variantProps({ base: config, variants: {} })\n      : variantProps(config);\n\n  const Component: <As extends ElementType = T>(\n    props: PolymorphicComponentProps<As> & VariantOptions<C>\n    // eslint-disable-next-line react/display-name\n  ) => ReactElement | null = forwardRef(\n    ({ as, ...props }: AsProps, ref: Ref<Element>) => {\n      return createElement(as ?? type, { ...styledProps(props), ref });\n    }\n  );\n  return Component;\n}\n","import * as React from \"react\";\nimport { VariantPropsOf, variantProps } from \"./variants\";\n\nconst buttonProps = variantProps({\n  base: \"rounded-full font-semibold focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2\",\n  variants: {\n    color: {\n      default: \"focus-visible:outline-indigo-600\",\n      primary: \"focus-visible:outline-green-600\",\n      warning: \"focus-visible:outline-orange-600\",\n      danger: \"focus-visible:outline-red-600\",\n    },\n    size: {\n      xs: \"px-2.5 py-1 text-xs\",\n      sm: \"px-2.5 py-1 text-sm\",\n      md: \"px-3 py-1.5 text-sm\",\n      lg: \"px-3.5 py-2 text-sm\",\n      xl: \"px-4 py-2.5 text-sm\",\n    },\n    disabled: {\n      true: \"cursor-not-allowed opacity-50\",\n    },\n    type: {\n      outline: \"ring-1 ring-inset bg-white shadow-sm\",\n      solid: \"text-white shadow-sm\",\n      link: \"hover:underline bg-white\",\n    },\n  },\n  compoundVariants: [\n    {\n      variants: {\n        color: \"default\",\n        type: \"solid\",\n      },\n      className: \"bg-indigo-600 hover:bg-indigo-500\",\n    },\n    {\n      variants: {\n        color: \"primary\",\n        type: \"solid\",\n      },\n      className: \"bg-green-600 hover:bg-green-500\",\n    },\n    {\n      variants: {\n        color: \"warning\",\n        type: \"solid\",\n      },\n      className: \"bg-orange-600 hover:bg-orange-500\",\n    },\n    {\n      variants: {\n        color: \"danger\",\n        type: \"solid\",\n      },\n      className: \"bg-red-600 hover:bg-red-500\",\n    },\n    {\n      variants: {\n        color: \"default\",\n        type: \"outline\",\n      },\n      className: \"text-indigo-600 ring-indigo-600 hover:bg-indigo-50\",\n    },\n    {\n      variants: {\n        color: \"primary\",\n        type: \"outline\",\n      },\n      className: \"ring-green-600 hover:bg-green-50\",\n    },\n    {\n      variants: {\n        color: \"warning\",\n        type: \"outline\",\n      },\n      className: \"ring-orange-600 hover:bg-orange-50\",\n    },\n    {\n      variants: {\n        color: \"danger\",\n        type: \"outline\",\n      },\n      className: \"ring-red-600 hover:bg-red-50\",\n    },\n    {\n      variants: {\n        color: \"default\",\n        type: \"link\",\n      },\n      className: \"text-indigo-600\",\n    },\n    {\n      variants: {\n        color: \"primary\",\n        type: \"link\",\n      },\n      className: \"ring-green-600\",\n    },\n    {\n      variants: {\n        color: \"warning\",\n        type: \"link\",\n      },\n      className: \"ring-orange-600\",\n    },\n    {\n      variants: {\n        color: \"danger\",\n        type: \"link\",\n      },\n      className: \"ring-red-600\",\n    },\n  ],\n  defaultVariants: {\n    color: \"default\",\n    size: \"md\",\n    disabled: false,\n    type: \"solid\",\n  },\n});\n\ntype Props = JSX.IntrinsicElements[\"button\"] &\n  VariantPropsOf<typeof buttonProps>;\n\nexport function Button(props: Props) {\n  return <button {...buttonProps(props)} />;\n}\n\n// Set display name so that correct component name shows up in DevTools / Storybook.\nButton.displayName = \"Button\";\n"]}