@okam/next-component 1.2.4 → 1.3.0

package/theme/Filter/index.js

@@ -0,0 +1,72 @@
+"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

@@ -0,0 +1,73 @@
+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.d.ts

@@ -0,0 +1,233 @@
+declare const typography: import('tailwind-variants').TVReturnType<{
+    size: {
+        h1: string;
+        h2: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h6: string;
+        leading: string;
+        paragraph: string;
+        footnotes: string;
+        xs: string;
+    };
+    font: {
+        body: string;
+    };
+    weight: {
+        normal: string;
+        light: string;
+        bold: string;
+    };
+    color: {
+        gray: string;
+        white: string;
+    };
+    isError: {
+        true: string;
+    };
+    align: {
+        center: string;
+        left: string;
+        right: string;
+    };
+}, undefined, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    size: {
+        h1: string;
+        h2: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h6: string;
+        leading: string;
+        paragraph: string;
+        footnotes: string;
+        xs: string;
+    };
+    font: {
+        body: string;
+    };
+    weight: {
+        normal: string;
+        light: string;
+        bold: string;
+    };
+    color: {
+        gray: string;
+        white: string;
+    };
+    isError: {
+        true: string;
+    };
+    align: {
+        center: string;
+        left: string;
+        right: string;
+    };
+}, {
+    size: {
+        h1: string;
+        h2: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h6: string;
+        leading: string;
+        paragraph: string;
+        footnotes: string;
+        xs: string;
+    };
+    font: {
+        body: string;
+    };
+    weight: {
+        normal: string;
+        light: string;
+        bold: string;
+    };
+    color: {
+        gray: string;
+        white: string;
+    };
+    isError: {
+        true: string;
+    };
+    align: {
+        center: string;
+        left: string;
+        right: string;
+    };
+}>, {
+    size: {
+        h1: string;
+        h2: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h6: string;
+        leading: string;
+        paragraph: string;
+        footnotes: string;
+        xs: string;
+    };
+    font: {
+        body: string;
+    };
+    weight: {
+        normal: string;
+        light: string;
+        bold: string;
+    };
+    color: {
+        gray: string;
+        white: string;
+    };
+    isError: {
+        true: string;
+    };
+    align: {
+        center: string;
+        left: string;
+        right: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    size: {
+        h1: string;
+        h2: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h6: string;
+        leading: string;
+        paragraph: string;
+        footnotes: string;
+        xs: string;
+    };
+    font: {
+        body: string;
+    };
+    weight: {
+        normal: string;
+        light: string;
+        bold: string;
+    };
+    color: {
+        gray: string;
+        white: string;
+    };
+    isError: {
+        true: string;
+    };
+    align: {
+        center: string;
+        left: string;
+        right: string;
+    };
+}, undefined, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    size: {
+        h1: string;
+        h2: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h6: string;
+        leading: string;
+        paragraph: string;
+        footnotes: string;
+        xs: string;
+    };
+    font: {
+        body: string;
+    };
+    weight: {
+        normal: string;
+        light: string;
+        bold: string;
+    };
+    color: {
+        gray: string;
+        white: string;
+    };
+    isError: {
+        true: string;
+    };
+    align: {
+        center: string;
+        left: string;
+        right: string;
+    };
+}, {
+    size: {
+        h1: string;
+        h2: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h6: string;
+        leading: string;
+        paragraph: string;
+        footnotes: string;
+        xs: string;
+    };
+    font: {
+        body: string;
+    };
+    weight: {
+        normal: string;
+        light: string;
+        bold: string;
+    };
+    color: {
+        gray: string;
+        white: string;
+    };
+    isError: {
+        true: string;
+    };
+    align: {
+        center: string;
+        left: string;
+        right: string;
+    };
+}>, unknown, unknown, undefined>>;
+export default typography;

package/theme/Typography/index.js

@@ -0,0 +1,43 @@
+"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

@@ -0,0 +1,44 @@
+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.d.ts

@@ -1,4 +1,6 @@
-declare const _default: import('react').MemoExoticComponent<({ children }: {
+import { default as React } from 'react';
+
+declare const _default: React.MemoExoticComponent<({ children }: {
     children: React.ReactNode;
 }) => import("react/jsx-runtime").JSX.Element>;
 export default _default;

package/theme/index.js

@@ -0,0 +1,16 @@
+"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

@@ -0,0 +1,17 @@
+"use client";
+import { makeTheme, createThemeProvider } from "@okam/stack-ui";
+import React 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 = React.memo(createThemeProvider(BaseTheme));
+export {
+  index as default
+};