@okam/next-component 2.0.3 → 2.1.0

package/providers/AdminBar/index.mjs

@@ -1,17 +0,0 @@
-"use client";
-import { jsx } from "react/jsx-runtime";
-import { createCtx } from "@okam/react-utils";
-import { useState, useMemo } from "react";
-const adminBarCtx = createCtx();
-const useAdminBar = adminBarCtx[0];
-const AdminBarProvider = adminBarCtx[1];
-function AdminBarContextProvider(props) {
-  const { children } = props;
-  const [error, setError] = useState();
-  const value = useMemo(() => ({ error, setError }), [error]);
-  return /* @__PURE__ */ jsx(AdminBarProvider, { value, children });
-}
-export {
-  AdminBarContextProvider,
-  useAdminBar
-};

package/providers/DraftMode/server.js

@@ -1,10 +0,0 @@
-"use strict";
-const jsxRuntime = require("react/jsx-runtime");
-const headers = require("next/headers");
-const index = require("./index.js");
-async function DraftModeServerContextProvider(props) {
-  const { children, ...rest } = props;
-  const { isEnabled } = await headers.draftMode();
-  return /* @__PURE__ */ jsxRuntime.jsx(index.DraftModeContextProvider, { isEnabled, ...rest, children });
-}
-module.exports = DraftModeServerContextProvider;

package/providers/DraftMode/server.mjs

@@ -1,11 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { draftMode } from "next/headers";
-import { DraftModeContextProvider } from "./index.mjs";
-async function DraftModeServerContextProvider(props) {
-  const { children, ...rest } = props;
-  const { isEnabled } = await draftMode();
-  return /* @__PURE__ */ jsx(DraftModeContextProvider, { isEnabled, ...rest, children });
-}
-export {
-  DraftModeServerContextProvider as default
-};

package/theme/AdminBar/index.js

@@ -1,120 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const tailwindVariants = require("tailwind-variants");
-const adminBarContainer = tailwindVariants.tv({
-  base: "w-full bg-gray-100 py-2 px-4 border-gray-200 fixed left-0 right-0 z-50",
-  variants: {
-    position: {
-      top: "top-0 border-b",
-      bottom: "bottom-0 border-t"
-    },
-    fullWidth: {
-      true: "max-w-full"
-    },
-    background: {
-      grey: "bg-gray-100",
-      dark: "bg-gray-800 text-white",
-      light: "bg-white"
-    },
-    padding: {
-      small: "py-1 px-2",
-      medium: "py-2 px-4",
-      large: "py-3 px-6"
-    }
-  },
-  defaultVariants: {
-    position: "top",
-    background: "grey",
-    padding: "medium"
-  }
-});
-const adminBarContent = tailwindVariants.tv({
-  base: "flex items-center",
-  variants: {
-    justify: {
-      start: "justify-start",
-      center: "justify-center",
-      end: "justify-end",
-      between: "justify-between",
-      around: "justify-around",
-      evenly: "justify-evenly"
-    },
-    gap: {
-      small: "gap-2",
-      medium: "gap-4",
-      large: "gap-6"
-    },
-    wrap: {
-      true: "flex-wrap",
-      false: "flex-nowrap"
-    }
-  },
-  defaultVariants: {
-    justify: "between",
-    gap: "medium",
-    wrap: false
-  }
-});
-const adminBarButton = tailwindVariants.tv({
-  base: "px-3 py-1 rounded text-sm font-medium transition-colors",
-  variants: {
-    variant: {
-      primary: "bg-blue-600 text-white hover:bg-blue-700",
-      secondary: "bg-gray-200 text-gray-800 hover:bg-gray-300",
-      danger: "bg-red-600 text-white hover:bg-red-700"
-    },
-    size: {
-      small: "text-xs px-2 py-0.5",
-      medium: "text-sm px-3 py-1",
-      large: "text-base px-4 py-2"
-    }
-  },
-  defaultVariants: {
-    variant: "secondary",
-    size: "medium"
-  }
-});
-const adminBarError = tailwindVariants.tv({
-  base: "flex items-center justify-center bg-red-50 text-red-700 px-3 py-1 rounded-md text-sm",
-  variants: {
-    severity: {
-      low: "bg-yellow-50 text-yellow-700",
-      medium: "bg-red-50 text-red-700",
-      high: "bg-red-100 text-red-800 font-bold"
-    },
-    hasBorder: {
-      true: "border border-red-300",
-      false: ""
-    }
-  },
-  defaultVariants: {
-    severity: "medium",
-    hasBorder: true
-  }
-});
-const adminBarErrorTypography = tailwindVariants.tv({
-  base: "text-red-700 text-sm font-medium",
-  variants: {
-    severity: {
-      low: "text-yellow-700",
-      medium: "text-red-700",
-      high: "text-red-800 font-bold"
-    }
-  },
-  defaultVariants: {
-    severity: "medium"
-  }
-});
-const adminBarTheme = {
-  container: adminBarContainer,
-  content: adminBarContent,
-  button: adminBarButton,
-  error: adminBarError,
-  errorTypography: adminBarErrorTypography
-};
-exports.adminBarButton = adminBarButton;
-exports.adminBarContainer = adminBarContainer;
-exports.adminBarContent = adminBarContent;
-exports.adminBarError = adminBarError;
-exports.adminBarErrorTypography = adminBarErrorTypography;
-exports.adminBarTheme = adminBarTheme;

package/theme/AdminBar/index.mjs

@@ -1,120 +0,0 @@
-import { tv } from "tailwind-variants";
-const adminBarContainer = tv({
-  base: "w-full bg-gray-100 py-2 px-4 border-gray-200 fixed left-0 right-0 z-50",
-  variants: {
-    position: {
-      top: "top-0 border-b",
-      bottom: "bottom-0 border-t"
-    },
-    fullWidth: {
-      true: "max-w-full"
-    },
-    background: {
-      grey: "bg-gray-100",
-      dark: "bg-gray-800 text-white",
-      light: "bg-white"
-    },
-    padding: {
-      small: "py-1 px-2",
-      medium: "py-2 px-4",
-      large: "py-3 px-6"
-    }
-  },
-  defaultVariants: {
-    position: "top",
-    background: "grey",
-    padding: "medium"
-  }
-});
-const adminBarContent = tv({
-  base: "flex items-center",
-  variants: {
-    justify: {
-      start: "justify-start",
-      center: "justify-center",
-      end: "justify-end",
-      between: "justify-between",
-      around: "justify-around",
-      evenly: "justify-evenly"
-    },
-    gap: {
-      small: "gap-2",
-      medium: "gap-4",
-      large: "gap-6"
-    },
-    wrap: {
-      true: "flex-wrap",
-      false: "flex-nowrap"
-    }
-  },
-  defaultVariants: {
-    justify: "between",
-    gap: "medium",
-    wrap: false
-  }
-});
-const adminBarButton = tv({
-  base: "px-3 py-1 rounded text-sm font-medium transition-colors",
-  variants: {
-    variant: {
-      primary: "bg-blue-600 text-white hover:bg-blue-700",
-      secondary: "bg-gray-200 text-gray-800 hover:bg-gray-300",
-      danger: "bg-red-600 text-white hover:bg-red-700"
-    },
-    size: {
-      small: "text-xs px-2 py-0.5",
-      medium: "text-sm px-3 py-1",
-      large: "text-base px-4 py-2"
-    }
-  },
-  defaultVariants: {
-    variant: "secondary",
-    size: "medium"
-  }
-});
-const adminBarError = tv({
-  base: "flex items-center justify-center bg-red-50 text-red-700 px-3 py-1 rounded-md text-sm",
-  variants: {
-    severity: {
-      low: "bg-yellow-50 text-yellow-700",
-      medium: "bg-red-50 text-red-700",
-      high: "bg-red-100 text-red-800 font-bold"
-    },
-    hasBorder: {
-      true: "border border-red-300",
-      false: ""
-    }
-  },
-  defaultVariants: {
-    severity: "medium",
-    hasBorder: true
-  }
-});
-const adminBarErrorTypography = tv({
-  base: "text-red-700 text-sm font-medium",
-  variants: {
-    severity: {
-      low: "text-yellow-700",
-      medium: "text-red-700",
-      high: "text-red-800 font-bold"
-    }
-  },
-  defaultVariants: {
-    severity: "medium"
-  }
-});
-const adminBarTheme = {
-  container: adminBarContainer,
-  content: adminBarContent,
-  button: adminBarButton,
-  error: adminBarError,
-  errorTypography: adminBarErrorTypography
-};
-export {
-  adminBarButton,
-  adminBarContainer,
-  adminBarContent,
-  adminBarError,
-  adminBarErrorTypography,
-  adminBarTheme
-};

package/theme/Button/index.js

@@ -1,75 +0,0 @@
-"use strict";
-const tailwindVariants = require("tailwind-variants");
-const button = tailwindVariants.tv({
-  base: `
-    flex
-    items-center
-    justify-center
-    gap-4
-    transition
-    duration-300
-    ease-in-out
-    disabled:pointer-events-none
-    disabled:opacity-30
-    focus-ring-black
-  `,
-  defaultVariants: {
-    buttonStyle: "default",
-    type: "button",
-    size: "default",
-    shape: "rounded"
-  },
-  variants: {
-    type: {
-      button: "",
-      menu: "text-2xl"
-    },
-    buttonStyle: {
-      default: `
-            px-4
-            py-2
-            text-white
-            !bg-color-1-500
-            hover:!bg-color-1-400
-            active:!bg-color-1-400
-          `,
-      outline: `
-            px-4
-            py-2
-            bg-transparent
-            !border-color-1-500
-            border-2
-            text-color-1-500
-            hover:bg-color-1-500
-            hover:text-white
-            active:bg-color-1-500
-            active:text-white
-          `,
-      hollow: `
-            px-2
-            bg-transparent
-            text-color-1-500
-            hover:border-b-color-1-500
-            active:border-b-color-1-500
-            focus:border-b-color-1-500
-          `
-    },
-    intent: {
-      error: `
-            !bg-error
-            text-white
-            pointer-events-none
-            !border-error
-          `
-    },
-    size: {
-      default: `min-w-12 min-h-6`,
-      large: `min-w-36 min-h-18`
-    },
-    shape: {
-      rounded: `rounded-md`,
-      circular: `rounded-full`
-    }
-  }
-});
-module.exports = button;

package/theme/Button/index.mjs

@@ -1,76 +0,0 @@
-import { tv } from "tailwind-variants";
-const button = tv({
-  base: `
-    flex
-    items-center
-    justify-center
-    gap-4
-    transition
-    duration-300
-    ease-in-out
-    disabled:pointer-events-none
-    disabled:opacity-30
-    focus-ring-black
-  `,
-  defaultVariants: {
-    buttonStyle: "default",
-    type: "button",
-    size: "default",
-    shape: "rounded"
-  },
-  variants: {
-    type: {
-      button: "",
-      menu: "text-2xl"
-    },
-    buttonStyle: {
-      default: `
-            px-4
-            py-2
-            text-white
-            !bg-color-1-500
-            hover:!bg-color-1-400
-            active:!bg-color-1-400
-          `,
-      outline: `
-            px-4
-            py-2
-            bg-transparent
-            !border-color-1-500
-            border-2
-            text-color-1-500
-            hover:bg-color-1-500
-            hover:text-white
-            active:bg-color-1-500
-            active:text-white
-          `,
-      hollow: `
-            px-2
-            bg-transparent
-            text-color-1-500
-            hover:border-b-color-1-500
-            active:border-b-color-1-500
-            focus:border-b-color-1-500
-          `
-    },
-    intent: {
-      error: `
-            !bg-error
-            text-white
-            pointer-events-none
-            !border-error
-          `
-    },
-    size: {
-      default: `min-w-12 min-h-6`,
-      large: `min-w-36 min-h-18`
-    },
-    shape: {
-      rounded: `rounded-md`,
-      circular: `rounded-full`
-    }
-  }
-});
-export {
-  button as default
-};

package/theme/Filter/index.js

@@ -1,72 +0,0 @@
-"use strict";
-const tailwindVariants = require("tailwind-variants");
-const index$1 = require("../Button/index.js");
-const index = require("../Typography/index.js");
-const filterTagGroupWrapper = tailwindVariants.tv({
-  base: "w-full flex flex-col gap-2"
-});
-const filterTagGroupTags = tailwindVariants.tv({
-  base: "flex flex-col gap-2 max-w-[150px] items-center mx-auto"
-});
-const filterTagGroupLabel = tailwindVariants.tv({
-  extend: index,
-  defaultVariants: { size: "h4" }
-});
-const filterTagGroupDescription = tailwindVariants.tv({
-  extend: index,
-  base: "block",
-  defaultVariants: { size: "footnotes" }
-});
-const filterTagGroupErrorMessage = tailwindVariants.tv({
-  extend: index,
-  base: "block",
-  defaultVariants: { isError: true }
-});
-const filterTagGroupTagWrapper = tailwindVariants.tv({
-  base: [
-    index$1({ buttonStyle: "outline" }),
-    `
-      focus-visible:outline
-      focus-visible:outline-offset-2
-      focus-visible:outline-2
-      focus-visible:outline-black
-    `
-  ],
-  variants: {
-    isSelected: {
-      true: [index$1({ buttonStyle: "default" })]
-    },
-    isDisabled: {
-      true: "pointer-events-none opacity-30"
-    }
-  }
-});
-const filterTagGroupTagContainer = tailwindVariants.tv({
-  extend: index,
-  base: "flex items-center justify-center"
-});
-const filterPopoverButton = tailwindVariants.tv({
-  extend: index$1,
-  base: "!min-w-[200px]"
-});
-const filterPopoverPopover = tailwindVariants.tv({
-  base: "w-[var(--filter-popover-container-width)] bg-gray-300 rounded-md p-4"
-});
-const filterTheme = {
-  popover: {
-    button: filterPopoverButton,
-    popover: filterPopoverPopover
-  },
-  tagGroup: {
-    wrapper: filterTagGroupWrapper,
-    tags: filterTagGroupTags,
-    label: filterTagGroupLabel,
-    description: filterTagGroupDescription,
-    errorMessage: filterTagGroupErrorMessage,
-    tag: {
-      wrapper: filterTagGroupTagWrapper,
-      container: filterTagGroupTagContainer
-    }
-  }
-};
-module.exports = filterTheme;

package/theme/Filter/index.mjs

@@ -1,73 +0,0 @@
-import { tv } from "tailwind-variants";
-import button from "../Button/index.mjs";
-import typography from "../Typography/index.mjs";
-const filterTagGroupWrapper = tv({
-  base: "w-full flex flex-col gap-2"
-});
-const filterTagGroupTags = tv({
-  base: "flex flex-col gap-2 max-w-[150px] items-center mx-auto"
-});
-const filterTagGroupLabel = tv({
-  extend: typography,
-  defaultVariants: { size: "h4" }
-});
-const filterTagGroupDescription = tv({
-  extend: typography,
-  base: "block",
-  defaultVariants: { size: "footnotes" }
-});
-const filterTagGroupErrorMessage = tv({
-  extend: typography,
-  base: "block",
-  defaultVariants: { isError: true }
-});
-const filterTagGroupTagWrapper = tv({
-  base: [
-    button({ buttonStyle: "outline" }),
-    `
-      focus-visible:outline
-      focus-visible:outline-offset-2
-      focus-visible:outline-2
-      focus-visible:outline-black
-    `
-  ],
-  variants: {
-    isSelected: {
-      true: [button({ buttonStyle: "default" })]
-    },
-    isDisabled: {
-      true: "pointer-events-none opacity-30"
-    }
-  }
-});
-const filterTagGroupTagContainer = tv({
-  extend: typography,
-  base: "flex items-center justify-center"
-});
-const filterPopoverButton = tv({
-  extend: button,
-  base: "!min-w-[200px]"
-});
-const filterPopoverPopover = tv({
-  base: "w-[var(--filter-popover-container-width)] bg-gray-300 rounded-md p-4"
-});
-const filterTheme = {
-  popover: {
-    button: filterPopoverButton,
-    popover: filterPopoverPopover
-  },
-  tagGroup: {
-    wrapper: filterTagGroupWrapper,
-    tags: filterTagGroupTags,
-    label: filterTagGroupLabel,
-    description: filterTagGroupDescription,
-    errorMessage: filterTagGroupErrorMessage,
-    tag: {
-      wrapper: filterTagGroupTagWrapper,
-      container: filterTagGroupTagContainer
-    }
-  }
-};
-export {
-  filterTheme as default
-};

package/theme/Typography/index.js

@@ -1,43 +0,0 @@
-"use strict";
-const tailwindVariants = require("tailwind-variants");
-const typography = tailwindVariants.tv({
-  variants: {
-    size: {
-      h1: `text-5xl`,
-      h2: `text-4xl`,
-      h3: `text-3xl`,
-      h4: `text-2xl`,
-      h5: `text-xl`,
-      h6: `text-lg`,
-      leading: `text-md font-bold leading-normal`,
-      paragraph: `text-md inline`,
-      footnotes: `text-sm`,
-      xs: `text-xs`
-    },
-    font: {
-      body: `font-body`
-    },
-    weight: {
-      normal: `font-normal`,
-      light: `font-light`,
-      bold: "font-bold"
-    },
-    color: {
-      gray: `text-gray-500`,
-      white: `text-white`
-    },
-    isError: {
-      true: "text-sm text-error py-3"
-    },
-    align: {
-      center: "text-center",
-      left: "text-left",
-      right: "text-right"
-    }
-  },
-  defaultVariants: {
-    size: "paragraph",
-    font: "body"
-  }
-});
-module.exports = typography;

package/theme/Typography/index.mjs

@@ -1,44 +0,0 @@
-import { tv } from "tailwind-variants";
-const typography = tv({
-  variants: {
-    size: {
-      h1: `text-5xl`,
-      h2: `text-4xl`,
-      h3: `text-3xl`,
-      h4: `text-2xl`,
-      h5: `text-xl`,
-      h6: `text-lg`,
-      leading: `text-md font-bold leading-normal`,
-      paragraph: `text-md inline`,
-      footnotes: `text-sm`,
-      xs: `text-xs`
-    },
-    font: {
-      body: `font-body`
-    },
-    weight: {
-      normal: `font-normal`,
-      light: `font-light`,
-      bold: "font-bold"
-    },
-    color: {
-      gray: `text-gray-500`,
-      white: `text-white`
-    },
-    isError: {
-      true: "text-sm text-error py-3"
-    },
-    align: {
-      center: "text-center",
-      left: "text-left",
-      right: "text-right"
-    }
-  },
-  defaultVariants: {
-    size: "paragraph",
-    font: "body"
-  }
-});
-export {
-  typography as default
-};

package/theme/index.js

@@ -1,16 +0,0 @@
-"use client";
-"use strict";
-const stackUi = require("@okam/stack-ui");
-const react = require("react");
-const index$1 = require("./AdminBar/index.js");
-const index$3 = require("./Button/index.js");
-const index$4 = require("./Filter/index.js");
-const index$2 = require("./Typography/index.js");
-const BaseTheme = stackUi.makeTheme({
-  filter: index$4,
-  button: index$3,
-  typography: index$2,
-  adminBar: index$1.adminBarTheme
-});
-const index = react.memo(stackUi.createThemeProvider(BaseTheme));
-module.exports = index;

package/theme/index.mjs

@@ -1,17 +0,0 @@
-"use client";
-import { createThemeProvider, makeTheme } from "@okam/stack-ui";
-import { memo } from "react";
-import { adminBarTheme } from "./AdminBar/index.mjs";
-import button from "./Button/index.mjs";
-import filterTheme from "./Filter/index.mjs";
-import typography from "./Typography/index.mjs";
-const BaseTheme = makeTheme({
-  filter: filterTheme,
-  button,
-  typography,
-  adminBar: adminBarTheme
-});
-const index = memo(createThemeProvider(BaseTheme));
-export {
-  index as default
-};