singularity-components 0.1.151 → 0.1.193

package/dist/components/primitives/{ui-image.js → ui-image/ui-image.js}

@@ -1,11 +1,11 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { useIsClient } from "../../lib";
+import { useIsClient } from "singularity-components/lib";
 import {
   DefaultImage,
   useImage
-} from "../providers/ImageContext";
-import { Skeleton } from "./skeleton/skeleton";
+} from "singularity-components/components/providers/ImageContext";
+import { Skeleton } from "../skeleton/skeleton.js";
 function UiImage({
   showServerSideDefaultImageComponent,
   ...props

package/dist/components/primitives/ui-image/ui-image.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/primitives/ui-image/ui-image.tsx"],"sourcesContent":["\"use client\";\r\nimport { useIsClient } from \"singularity-components/lib\";\r\nimport {\r\n  DefaultImage,\r\n  useImage,\r\n  type BaseImageProps,\r\n} from \"singularity-components/components/providers/ImageContext\";\r\nimport { Skeleton } from \"../skeleton/skeleton\";\r\n\r\ntype Props = {\r\n  showServerSideDefaultImageComponent?: boolean;\r\n} & BaseImageProps;\r\n\r\nexport function UiImage({\r\n  showServerSideDefaultImageComponent,\r\n  ...props\r\n}: Props) {\r\n  const isClient = useIsClient();\r\n\r\n  const ImageComponent = useImage();\r\n\r\n  if (!isClient) {\r\n    if (showServerSideDefaultImageComponent) {\r\n      return (\r\n        <DefaultImage\r\n          src={props.src}\r\n          alt={props.alt}\r\n          className={props.className}\r\n        />\r\n      );\r\n    } else {\r\n      return <Skeleton />;\r\n    }\r\n  }\r\n\r\n  return <ImageComponent {...props} />;\r\n}\r\n"],"mappings":";AAwBQ;AAvBR,SAAS,mBAAmB;AAC5B;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AACP,SAAS,gBAAgB;AAMlB,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA,GAAG;AACL,GAAU;AACR,QAAM,WAAW,YAAY;AAE7B,QAAM,iBAAiB,SAAS;AAEhC,MAAI,CAAC,UAAU;AACb,QAAI,qCAAqC;AACvC,aACE;AAAA,QAAC;AAAA;AAAA,UACC,KAAK,MAAM;AAAA,UACX,KAAK,MAAM;AAAA,UACX,WAAW,MAAM;AAAA;AAAA,MACnB;AAAA,IAEJ,OAAO;AACL,aAAO,oBAAC,YAAS;AAAA,IACnB;AAAA,EACF;AAEA,SAAO,oBAAC,kBAAgB,GAAG,OAAO;AACpC;","names":[]}

package/dist/components/primitives/ui-link/ui-link.d.ts

@@ -0,0 +1,8 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { BaseLinkProps } from '../../providers/LinkContext.js';
+import 'react';
+
+type Props = BaseLinkProps;
+declare const UiLink: ({ ...props }: Props) => react_jsx_runtime.JSX.Element;
+
+export { UiLink };

package/dist/components/primitives/ui-link/ui-link.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useIsClient } from "singularity-components/lib";
+import {
+  useLink,
+  DefaultLink
+} from "../../providers/index.js";
+const UiLink = ({ ...props }) => {
+  const isClient = useIsClient();
+  const LinkComponent = useLink();
+  if (!isClient) {
+    return /* @__PURE__ */ jsx(DefaultLink, { to: props.to, className: props.className, children: props.children });
+  }
+  return /* @__PURE__ */ jsx(LinkComponent, { className: props.className, ...props, children: props.children });
+};
+export {
+  UiLink
+};
+//# sourceMappingURL=ui-link.js.map

package/dist/components/primitives/ui-link/ui-link.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/primitives/ui-link/ui-link.tsx"],"sourcesContent":["\"use client\";\r\nimport { useIsClient } from \"singularity-components/lib\";\r\nimport {\r\n  type BaseLinkProps,\r\n  useLink,\r\n  DefaultLink,\r\n} from \"../../providers/index\";\r\n\r\ntype Props = BaseLinkProps;\r\n\r\nexport const UiLink = ({ ...props }: Props) => {\r\n  const isClient = useIsClient();\r\n  const LinkComponent = useLink();\r\n\r\n  if (!isClient) {\r\n    return (\r\n      <DefaultLink to={props.to} className={props.className}>\r\n        {props.children}\r\n      </DefaultLink>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <LinkComponent className={props.className} {...props}>\r\n      {props.children}\r\n    </LinkComponent>\r\n  );\r\n};\r\n"],"mappings":";AAgBM;AAfN,SAAS,mBAAmB;AAC5B;AAAA,EAEE;AAAA,EACA;AAAA,OACK;AAIA,MAAM,SAAS,CAAC,EAAE,GAAG,MAAM,MAAa;AAC7C,QAAM,WAAW,YAAY;AAC7B,QAAM,gBAAgB,QAAQ;AAE9B,MAAI,CAAC,UAAU;AACb,WACE,oBAAC,eAAY,IAAI,MAAM,IAAI,WAAW,MAAM,WACzC,gBAAM,UACT;AAAA,EAEJ;AAEA,SACE,oBAAC,iBAAc,WAAW,MAAM,WAAY,GAAG,OAC5C,gBAAM,UACT;AAEJ;","names":[]}

package/dist/components/providers/LinkContext.d.ts

@@ -1,7 +1,7 @@
 import React__default, { HTMLAttributeAnchorTarget, ReactNode } from 'react';
 
 interface BaseLinkProps {
-    href: string;
+    to: string;
     target?: HTMLAttributeAnchorTarget;
     className?: string;
     [key: string]: any;

package/dist/components/providers/LinkContext.js

@@ -4,7 +4,7 @@ import React, {
   createContext,
   useContext
 } from "react";
-const DefaultLink = ({ href, ...rest }) => /* @__PURE__ */ jsx("a", { href, ...rest });
+const DefaultLink = ({ to, ...rest }) => /* @__PURE__ */ jsx("a", { href: to, ...rest });
 const LinkContext = createContext({
   LinkComponent: DefaultLink
 });

package/dist/components/providers/LinkContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/providers/LinkContext.tsx"],"sourcesContent":["\"use client\";\r\nimport React, {\r\n  createContext,\r\n  useContext,\r\n  type HTMLAttributeAnchorTarget,\r\n  type ReactNode,\r\n} from \"react\";\r\n\r\nexport interface BaseLinkProps {\r\n  href: string;\r\n  target?: HTMLAttributeAnchorTarget;\r\n  className?: string;\r\n  [key: string]: any; // allow framework-specific props\r\n}\r\n\r\n// Define the LinkComponent type\r\nexport type LinkComponentType<P extends BaseLinkProps = BaseLinkProps> =\r\n  React.ComponentType<P>;\r\n\r\n// Define the context value\r\ninterface LinkContextValue {\r\n  LinkComponent: LinkComponentType;\r\n}\r\n\r\n// Default <a> fallback\r\nexport const DefaultLink: LinkComponentType = ({ href, ...rest }) => (\r\n  <a href={href} {...rest} />\r\n);\r\n\r\n// Create the context\r\nconst LinkContext = createContext<LinkContextValue>({\r\n  LinkComponent: DefaultLink,\r\n});\r\n\r\n// Provider props (type-safe)\r\ninterface LinkProviderProps {\r\n  LinkComponent: LinkComponentType;\r\n  children: ReactNode;\r\n}\r\n\r\nexport const LinkProvider: React.FC<LinkProviderProps> = ({\r\n  LinkComponent,\r\n  children,\r\n}) => (\r\n  <LinkContext.Provider value={{ LinkComponent }}>\r\n    {children}\r\n  </LinkContext.Provider>\r\n);\r\n\r\nexport const useLink = <\r\n  P extends BaseLinkProps = BaseLinkProps\r\n>(): LinkComponentType<P> => {\r\n  const ctx = useContext(LinkContext);\r\n  if (!ctx) {\r\n    throw new Error(\"useLink must be used within an LinkProvider\");\r\n  }\r\n  return ctx.LinkComponent as LinkComponentType<P>;\r\n};\r\n"],"mappings":";AA0BE;AAzBF,OAAO;AAAA,EACL;AAAA,EACA;AAAA,OAGK;AAmBA,MAAM,cAAiC,CAAC,EAAE,MAAM,GAAG,KAAK,MAC7D,oBAAC,OAAE,MAAa,GAAG,MAAM;AAI3B,MAAM,cAAc,cAAgC;AAAA,EAClD,eAAe;AACjB,CAAC;AAQM,MAAM,eAA4C,CAAC;AAAA,EACxD;AAAA,EACA;AACF,MACE,oBAAC,YAAY,UAAZ,EAAqB,OAAO,EAAE,cAAc,GAC1C,UACH;AAGK,MAAM,UAAU,MAEM;AAC3B,QAAM,MAAM,WAAW,WAAW;AAClC,MAAI,CAAC,KAAK;AACR,UAAM,IAAI,MAAM,6CAA6C;AAAA,EAC/D;AACA,SAAO,IAAI;AACb;","names":[]}
+{"version":3,"sources":["../../../src/components/providers/LinkContext.tsx"],"sourcesContent":["\"use client\";\r\nimport React, {\r\n  createContext,\r\n  useContext,\r\n  type HTMLAttributeAnchorTarget,\r\n  type ReactNode,\r\n} from \"react\";\r\n\r\nexport interface BaseLinkProps {\r\n  to: string;\r\n  target?: HTMLAttributeAnchorTarget;\r\n  className?: string;\r\n  [key: string]: any; // allow framework-specific props\r\n}\r\n\r\n// Define the LinkComponent type\r\nexport type LinkComponentType<P extends BaseLinkProps = BaseLinkProps> =\r\n  React.ComponentType<P>;\r\n\r\n// Define the context value\r\ninterface LinkContextValue {\r\n  LinkComponent: LinkComponentType;\r\n}\r\n\r\n// Default <a> fallback\r\nexport const DefaultLink: LinkComponentType = ({ to, ...rest }) => (\r\n  <a href={to} {...rest} />\r\n);\r\n\r\n// Create the context\r\nconst LinkContext = createContext<LinkContextValue>({\r\n  LinkComponent: DefaultLink,\r\n});\r\n\r\n// Provider props (type-safe)\r\ninterface LinkProviderProps {\r\n  LinkComponent: LinkComponentType;\r\n  children: ReactNode;\r\n}\r\n\r\nexport const LinkProvider: React.FC<LinkProviderProps> = ({\r\n  LinkComponent,\r\n  children,\r\n}) => (\r\n  <LinkContext.Provider value={{ LinkComponent }}>\r\n    {children}\r\n  </LinkContext.Provider>\r\n);\r\n\r\nexport const useLink = <\r\n  P extends BaseLinkProps = BaseLinkProps,\r\n>(): LinkComponentType<P> => {\r\n  const ctx = useContext(LinkContext);\r\n  if (!ctx) {\r\n    throw new Error(\"useLink must be used within an LinkProvider\");\r\n  }\r\n  return ctx.LinkComponent as LinkComponentType<P>;\r\n};\r\n"],"mappings":";AA0BE;AAzBF,OAAO;AAAA,EACL;AAAA,EACA;AAAA,OAGK;AAmBA,MAAM,cAAiC,CAAC,EAAE,IAAI,GAAG,KAAK,MAC3D,oBAAC,OAAE,MAAM,IAAK,GAAG,MAAM;AAIzB,MAAM,cAAc,cAAgC;AAAA,EAClD,eAAe;AACjB,CAAC;AAQM,MAAM,eAA4C,CAAC;AAAA,EACxD;AAAA,EACA;AACF,MACE,oBAAC,YAAY,UAAZ,EAAqB,OAAO,EAAE,cAAc,GAC1C,UACH;AAGK,MAAM,UAAU,MAEM;AAC3B,QAAM,MAAM,WAAW,WAAW;AAClC,MAAI,CAAC,KAAK;AACR,UAAM,IAAI,MAAM,6CAA6C;AAAA,EAC/D;AACA,SAAO,IAAI;AACb;","names":[]}

package/dist/components/providers/SingularityContext.d.ts

@@ -1,10 +1,13 @@
+import React__default, { ReactNode } from 'react';
 import { ImageComponentType } from './ImageContext.js';
 import { LinkComponentType } from './LinkContext.js';
-import React__default, { ReactNode } from 'react';
+import { Theme } from './theme-provider.js';
+import 'react/jsx-runtime';
 
 interface SingularityProviderProps {
     ImageComponent?: ImageComponentType;
     LinkComponent?: LinkComponentType;
+    defaultTheme?: Theme;
     children: ReactNode;
 }
 declare const SingularityProvider: React__default.FC<SingularityProviderProps>;

package/dist/components/providers/SingularityContext.js

@@ -4,17 +4,21 @@ import React, {} from "react";
 import {
   ImageProvider,
   DefaultImage
-} from "./ImageContext";
+} from "./ImageContext.js";
 import {
   LinkProvider,
   DefaultLink
-} from "./LinkContext";
+} from "./LinkContext.js";
+import {
+  ThemeProvider
+} from "./theme-provider.js";
 const SingularityProvider = ({
   ImageComponent = DefaultImage,
   LinkComponent = DefaultLink,
+  defaultTheme = "system",
   children
 }) => {
-  return /* @__PURE__ */ jsx(ImageProvider, { ImageComponent, children: /* @__PURE__ */ jsx(LinkProvider, { LinkComponent, children }) });
+  return /* @__PURE__ */ jsx(ThemeProvider, { defaultTheme, children: /* @__PURE__ */ jsx(ImageProvider, { ImageComponent, children: /* @__PURE__ */ jsx(LinkProvider, { LinkComponent, children }) }) });
 };
 export {
   SingularityProvider

package/dist/components/providers/SingularityContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/providers/SingularityContext.tsx"],"sourcesContent":["\"use client\";\nimport React, { type ReactNode } from \"react\";\nimport {\n  ImageProvider,\n  type ImageComponentType,\n  DefaultImage,\n} from \"./ImageContext\";\nimport {\n  LinkProvider,\n  type LinkComponentType,\n  DefaultLink,\n} from \"./LinkContext\";\n\ninterface SingularityProviderProps {\n  ImageComponent?: ImageComponentType;\n  LinkComponent?: LinkComponentType;\n  children: ReactNode;\n}\n\nexport const SingularityProvider: React.FC<SingularityProviderProps> = ({\n  ImageComponent = DefaultImage,\n  LinkComponent = DefaultLink,\n  children,\n}) => {\n  return (\n    <ImageProvider ImageComponent={ImageComponent}>\n      <LinkProvider LinkComponent={LinkComponent}>{children}</LinkProvider>\n    </ImageProvider>\n  );\n};\n"],"mappings":";AA0BM;AAzBN,OAAO,eAA+B;AACtC;AAAA,EACE;AAAA,EAEA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EAEA;AAAA,OACK;AAQA,MAAM,sBAA0D,CAAC;AAAA,EACtE,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB;AACF,MAAM;AACJ,SACE,oBAAC,iBAAc,gBACb,8BAAC,gBAAa,eAA+B,UAAS,GACxD;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/providers/SingularityContext.tsx"],"sourcesContent":["\"use client\";\nimport React, { type ReactNode } from \"react\";\nimport {\n  ImageProvider,\n  type ImageComponentType,\n  DefaultImage,\n} from \"./ImageContext\";\nimport {\n  LinkProvider,\n  type LinkComponentType,\n  DefaultLink,\n} from \"./LinkContext\";\n\nimport {\n  ThemeProvider,\n  type Theme,\n} from \"./theme-provider\";\n\ninterface SingularityProviderProps {\n  ImageComponent?: ImageComponentType;\n  LinkComponent?: LinkComponentType;\n  defaultTheme?: Theme;\n  children: ReactNode;\n}\n\nexport const SingularityProvider: React.FC<SingularityProviderProps> = ({\n  ImageComponent = DefaultImage,\n  LinkComponent = DefaultLink,\n  defaultTheme = \"system\",\n  children,\n}) => {\n  return (\n    <ThemeProvider defaultTheme={defaultTheme}>\n      <ImageProvider ImageComponent={ImageComponent}>\n        <LinkProvider LinkComponent={LinkComponent}>{children}</LinkProvider>\n      </ImageProvider>\n    </ThemeProvider>\n  );\n};\n"],"mappings":";AAkCQ;AAjCR,OAAO,eAA+B;AACtC;AAAA,EACE;AAAA,EAEA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EAEA;AAAA,OACK;AAEP;AAAA,EACE;AAAA,OAEK;AASA,MAAM,sBAA0D,CAAC;AAAA,EACtE,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,eAAe;AAAA,EACf;AACF,MAAM;AACJ,SACE,oBAAC,iBAAc,cACb,8BAAC,iBAAc,gBACb,8BAAC,gBAAa,eAA+B,UAAS,GACxD,GACF;AAEJ;","names":[]}

package/dist/components/providers/auth-provider.d.ts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface AuthContextType {
+    isLoggedIn: boolean;
+    userName: string;
+    login: (name: string) => void;
+    logout: () => void;
+}
+declare function AuthProvider({ children }: {
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare const useAuth: () => AuthContextType;
+
+export { AuthProvider, useAuth };

package/dist/components/providers/auth-provider.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext, useState } from "react";
+const AuthContext = createContext({
+  isLoggedIn: false,
+  userName: "",
+  login: () => {
+  },
+  logout: () => {
+  }
+});
+function AuthProvider({ children }) {
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const [userName, setUserName] = useState("");
+  const login = (name) => {
+    setIsLoggedIn(true);
+    setUserName(name);
+  };
+  const logout = () => {
+    setIsLoggedIn(false);
+    setUserName("");
+  };
+  return /* @__PURE__ */ jsx(AuthContext.Provider, { value: { isLoggedIn, userName, login, logout }, children });
+}
+const useAuth = () => useContext(AuthContext);
+export {
+  AuthProvider,
+  useAuth
+};
+//# sourceMappingURL=auth-provider.js.map

package/dist/components/providers/auth-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/providers/auth-provider.tsx"],"sourcesContent":["\"use client\";\nimport { createContext, useContext, useState, type ReactNode } from \"react\";\n\ninterface AuthContextType {\n  isLoggedIn: boolean;\n  userName: string;\n  login: (name: string) => void;\n  logout: () => void;\n}\n\nconst AuthContext = createContext<AuthContextType>({\n  isLoggedIn: false,\n  userName: \"\",\n  login: () => {},\n  logout: () => {},\n});\n\nexport function AuthProvider({ children }: { children: ReactNode }) {\n  const [isLoggedIn, setIsLoggedIn] = useState(false);\n  const [userName, setUserName] = useState(\"\");\n\n  const login = (name: string) => {\n    setIsLoggedIn(true);\n    setUserName(name);\n  };\n\n  const logout = () => {\n    setIsLoggedIn(false);\n    setUserName(\"\");\n  };\n\n  return (\n    <AuthContext.Provider value={{ isLoggedIn, userName, login, logout }}>\n      {children}\n    </AuthContext.Provider>\n  );\n}\n\nexport const useAuth = () => useContext(AuthContext);\n"],"mappings":";AAgCI;AA/BJ,SAAS,eAAe,YAAY,gBAAgC;AASpE,MAAM,cAAc,cAA+B;AAAA,EACjD,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,OAAO,MAAM;AAAA,EAAC;AAAA,EACd,QAAQ,MAAM;AAAA,EAAC;AACjB,CAAC;AAEM,SAAS,aAAa,EAAE,SAAS,GAA4B;AAClE,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAClD,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,EAAE;AAE3C,QAAM,QAAQ,CAAC,SAAiB;AAC9B,kBAAc,IAAI;AAClB,gBAAY,IAAI;AAAA,EAClB;AAEA,QAAM,SAAS,MAAM;AACnB,kBAAc,KAAK;AACnB,gBAAY,EAAE;AAAA,EAChB;AAEA,SACE,oBAAC,YAAY,UAAZ,EAAqB,OAAO,EAAE,YAAY,UAAU,OAAO,OAAO,GAChE,UACH;AAEJ;AAEO,MAAM,UAAU,MAAM,WAAW,WAAW;","names":[]}

package/dist/components/providers/index.d.ts

@@ -1,4 +1,7 @@
 export { BaseImageProps, DefaultImage, ImageComponentType, ImageProvider, useImage } from './ImageContext.js';
 export { BaseLinkProps, DefaultLink, LinkComponentType, LinkProvider, useLink } from './LinkContext.js';
 export { SingularityProvider } from './SingularityContext.js';
+export { AuthProvider, useAuth } from './auth-provider.js';
+export { Theme, ThemeProvider, ThemeProviderProps, ThemeProviderState, useTheme } from './theme-provider.js';
 import 'react';
+import 'react/jsx-runtime';

package/dist/components/providers/index.js

@@ -1,4 +1,6 @@
-export * from "./ImageContext";
-export * from "./LinkContext";
-export * from "./SingularityContext";
+export * from "./ImageContext.js";
+export * from "./LinkContext.js";
+export * from "./SingularityContext.js";
+export * from "./auth-provider.js";
+export * from "./theme-provider.js";
 //# sourceMappingURL=index.js.map

package/dist/components/providers/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/providers/index.ts"],"sourcesContent":["export * from \"./ImageContext\";\r\nexport * from \"./LinkContext\";\r\nexport * from \"./SingularityContext\";"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}
+{"version":3,"sources":["../../../src/components/providers/index.ts"],"sourcesContent":["/**\n * Providers index\n *\n * Please keep exports sorted alphabetically by path!\n */\n\nexport * from \"./ImageContext\";\nexport * from \"./LinkContext\";\nexport * from \"./SingularityContext\";\nexport * from \"./auth-provider\";\nexport * from \"./theme-provider\";\n"],"mappings":"AAMA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}

package/dist/components/providers/theme-provider.d.ts

@@ -0,0 +1,27 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+type Theme = "dark" | "light" | "system";
+type ThemeProviderProps = {
+    children: React.ReactNode;
+    defaultTheme?: Theme;
+};
+type ThemeProviderState = {
+    theme: Theme;
+    setTheme: (theme: Theme) => void;
+    toggleTheme: () => void;
+    resolvedTheme: "light" | "dark";
+    mounted: boolean;
+};
+/**
+ * ThemeProvider component that manages the application's theme state.
+ * Supports "light", "dark", and "system" modes.
+ * Default is "system" with a fallback to "dark".
+ */
+declare function ThemeProvider({ children, defaultTheme, ...props }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * Hook to access the current theme and setTheme function.
+ */
+declare const useTheme: () => ThemeProviderState;
+
+export { type Theme, ThemeProvider, type ThemeProviderProps, type ThemeProviderState, useTheme };

package/dist/components/providers/theme-provider.js

@@ -0,0 +1,75 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+const initialState = {
+  theme: "system",
+  setTheme: () => null,
+  toggleTheme: () => null,
+  resolvedTheme: "dark",
+  mounted: false
+};
+const ThemeProviderContext = React.createContext(initialState);
+function ThemeProvider({
+  children,
+  defaultTheme = "system",
+  ...props
+}) {
+  const [theme, setThemeState] = React.useState(defaultTheme);
+  const [systemTheme, setSystemTheme] = React.useState("dark");
+  const [mounted, setMounted] = React.useState(false);
+  React.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const currentSystem = mediaQuery.matches ? "dark" : "light";
+    setSystemTheme(currentSystem);
+    const handleChange = () => {
+      setSystemTheme(mediaQuery.matches ? "dark" : "light");
+    };
+    mediaQuery.addEventListener("change", handleChange);
+    setMounted(true);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, []);
+  const resolvedTheme = React.useMemo(() => {
+    if (theme === "system") return systemTheme;
+    return theme;
+  }, [theme, systemTheme]);
+  React.useEffect(() => {
+    if (!mounted) return;
+    const root = window.document.documentElement;
+    root.classList.remove("light", "dark");
+    root.classList.add(resolvedTheme);
+  }, [resolvedTheme, mounted]);
+  const value = React.useMemo(
+    () => ({
+      theme,
+      setTheme: (newTheme) => {
+        setThemeState(newTheme);
+      },
+      toggleTheme: () => {
+        setThemeState((prev) => {
+          let currentVisual = prev;
+          if (prev === "system") {
+            const systemMatch = window.matchMedia("(prefers-color-scheme: dark)").matches;
+            currentVisual = systemMatch ? "dark" : "light";
+          }
+          return currentVisual === "dark" ? "light" : "dark";
+        });
+      },
+      resolvedTheme,
+      mounted
+    }),
+    [theme, resolvedTheme, systemTheme, mounted]
+  );
+  return /* @__PURE__ */ jsx(ThemeProviderContext.Provider, { ...props, value, children });
+}
+const useTheme = () => {
+  const context = React.useContext(ThemeProviderContext);
+  if (context === void 0)
+    throw new Error("useTheme must be used within a ThemeProvider");
+  return context;
+};
+export {
+  ThemeProvider,
+  useTheme
+};
+//# sourceMappingURL=theme-provider.js.map

package/dist/components/providers/theme-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/providers/theme-provider.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\nexport type Theme = \"dark\" | \"light\" | \"system\";\n\nexport type ThemeProviderProps = {\n  children: React.ReactNode;\n  defaultTheme?: Theme;\n};\n\nexport type ThemeProviderState = {\n  theme: Theme;\n  setTheme: (theme: Theme) => void;\n  toggleTheme: () => void;\n  resolvedTheme: \"light\" | \"dark\";\n  mounted: boolean;\n};\n\nconst initialState: ThemeProviderState = {\n  theme: \"system\",\n  setTheme: () => null,\n  toggleTheme: () => null,\n  resolvedTheme: \"dark\",\n  mounted: false,\n};\n\nconst ThemeProviderContext =\n  React.createContext<ThemeProviderState>(initialState);\n\n/**\n * ThemeProvider component that manages the application's theme state.\n * Supports \"light\", \"dark\", and \"system\" modes.\n * Default is \"system\" with a fallback to \"dark\".\n */\nexport function ThemeProvider({\n  children,\n  defaultTheme = \"system\",\n  ...props\n}: ThemeProviderProps) {\n  const [theme, setThemeState] = React.useState<Theme>(defaultTheme);\n  const [systemTheme, setSystemTheme] = React.useState<\"light\" | \"dark\">(\"dark\"); // Default fallback to dark\n  const [mounted, setMounted] = React.useState(false);\n\n  // Unified initialization effect\n  React.useEffect(() => {\n    if (typeof window === \"undefined\") return;\n\n    // 1. Detect System Theme\n    const mediaQuery = window.matchMedia(\"(prefers-color-scheme: dark)\");\n    const currentSystem = mediaQuery.matches ? \"dark\" : \"light\";\n    setSystemTheme(currentSystem);\n\n    const handleChange = () => {\n      setSystemTheme(mediaQuery.matches ? \"dark\" : \"light\");\n    };\n    mediaQuery.addEventListener(\"change\", handleChange);\n\n    // 2. Mark as mounted\n    setMounted(true);\n\n    return () => mediaQuery.removeEventListener(\"change\", handleChange);\n  }, []);\n\n  /**\n   * Computed visual theme.\n   * Purely derived from state, with a default fallback to \"dark\".\n   */\n  const resolvedTheme = React.useMemo(() => {\n    if (theme === \"system\") return systemTheme;\n    return theme as \"light\" | \"dark\";\n  }, [theme, systemTheme]);\n\n  // Sync resolved theme to document root\n  React.useEffect(() => {\n    if (!mounted) return;\n\n    const root = window.document.documentElement;\n    root.classList.remove(\"light\", \"dark\");\n    root.classList.add(resolvedTheme);\n  }, [resolvedTheme, mounted]);\n\n  const value = React.useMemo(\n    () => ({\n      theme,\n      setTheme: (newTheme: Theme) => {\n        setThemeState(newTheme);\n      },\n      toggleTheme: () => {\n        setThemeState((prev) => {\n          let currentVisual = prev as \"light\" | \"dark\";\n          if (prev === \"system\") {\n            const systemMatch = window.matchMedia(\"(prefers-color-scheme: dark)\").matches;\n            currentVisual = systemMatch ? \"dark\" : \"light\";\n          }\n          \n          return currentVisual === \"dark\" ? \"light\" : \"dark\";\n        });\n      },\n      resolvedTheme,\n      mounted,\n    }),\n    [theme, resolvedTheme, systemTheme, mounted],\n  );\n\n  return (\n    <ThemeProviderContext.Provider {...props} value={value}>\n      {children}\n    </ThemeProviderContext.Provider>\n  );\n}\n\n/**\n * Hook to access the current theme and setTheme function.\n */\nexport const useTheme = () => {\n  const context = React.useContext(ThemeProviderContext);\n\n  if (context === undefined)\n    throw new Error(\"useTheme must be used within a ThemeProvider\");\n\n  return context;\n};\n"],"mappings":";AA0GI;AAxGJ,YAAY,WAAW;AAiBvB,MAAM,eAAmC;AAAA,EACvC,OAAO;AAAA,EACP,UAAU,MAAM;AAAA,EAChB,aAAa,MAAM;AAAA,EACnB,eAAe;AAAA,EACf,SAAS;AACX;AAEA,MAAM,uBACJ,MAAM,cAAkC,YAAY;AAO/C,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA,eAAe;AAAA,EACf,GAAG;AACL,GAAuB;AACrB,QAAM,CAAC,OAAO,aAAa,IAAI,MAAM,SAAgB,YAAY;AACjE,QAAM,CAAC,aAAa,cAAc,IAAI,MAAM,SAA2B,MAAM;AAC7E,QAAM,CAAC,SAAS,UAAU,IAAI,MAAM,SAAS,KAAK;AAGlD,QAAM,UAAU,MAAM;AACpB,QAAI,OAAO,WAAW,YAAa;AAGnC,UAAM,aAAa,OAAO,WAAW,8BAA8B;AACnE,UAAM,gBAAgB,WAAW,UAAU,SAAS;AACpD,mBAAe,aAAa;AAE5B,UAAM,eAAe,MAAM;AACzB,qBAAe,WAAW,UAAU,SAAS,OAAO;AAAA,IACtD;AACA,eAAW,iBAAiB,UAAU,YAAY;AAGlD,eAAW,IAAI;AAEf,WAAO,MAAM,WAAW,oBAAoB,UAAU,YAAY;AAAA,EACpE,GAAG,CAAC,CAAC;AAML,QAAM,gBAAgB,MAAM,QAAQ,MAAM;AACxC,QAAI,UAAU,SAAU,QAAO;AAC/B,WAAO;AAAA,EACT,GAAG,CAAC,OAAO,WAAW,CAAC;AAGvB,QAAM,UAAU,MAAM;AACpB,QAAI,CAAC,QAAS;AAEd,UAAM,OAAO,OAAO,SAAS;AAC7B,SAAK,UAAU,OAAO,SAAS,MAAM;AACrC,SAAK,UAAU,IAAI,aAAa;AAAA,EAClC,GAAG,CAAC,eAAe,OAAO,CAAC;AAE3B,QAAM,QAAQ,MAAM;AAAA,IAClB,OAAO;AAAA,MACL;AAAA,MACA,UAAU,CAAC,aAAoB;AAC7B,sBAAc,QAAQ;AAAA,MACxB;AAAA,MACA,aAAa,MAAM;AACjB,sBAAc,CAAC,SAAS;AACtB,cAAI,gBAAgB;AACpB,cAAI,SAAS,UAAU;AACrB,kBAAM,cAAc,OAAO,WAAW,8BAA8B,EAAE;AACtE,4BAAgB,cAAc,SAAS;AAAA,UACzC;AAEA,iBAAO,kBAAkB,SAAS,UAAU;AAAA,QAC9C,CAAC;AAAA,MACH;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,OAAO,eAAe,aAAa,OAAO;AAAA,EAC7C;AAEA,SACE,oBAAC,qBAAqB,UAArB,EAA+B,GAAG,OAAO,OACvC,UACH;AAEJ;AAKO,MAAM,WAAW,MAAM;AAC5B,QAAM,UAAU,MAAM,WAAW,oBAAoB;AAErD,MAAI,YAAY;AACd,UAAM,IAAI,MAAM,8CAA8C;AAEhE,SAAO;AACT;","names":[]}

package/dist/components/templates/container/container.d.ts

@@ -0,0 +1,20 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { PropsWithChildren } from 'react';
+
+type Prop = {
+    children?: React.ReactNode;
+    as?: "body" | "div";
+} & React.HTMLAttributes<HTMLElement>;
+declare function Container({ children, as: Component, className, ...rest }: PropsWithChildren<Prop>): react_jsx_runtime.JSX.Element;
+declare namespace Container {
+    var Header: ({ children, as: Component, ...props }: ChildProp) => react_jsx_runtime.JSX.Element;
+    var Content: ({ children, as: Component, ...props }: ChildProp) => react_jsx_runtime.JSX.Element;
+    var Footer: ({ children, as: Component, ...props }: ChildProp) => react_jsx_runtime.JSX.Element;
+}
+type ChildProp = {
+    children?: React.ReactNode;
+    as?: React.ElementType;
+} & React.HTMLAttributes<HTMLElement>;
+
+export { Container };

package/dist/components/templates/container/container.js

@@ -0,0 +1,58 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../../utils/index.js";
+function Container({
+  children,
+  as: Component = "div",
+  className,
+  ...rest
+}) {
+  const childArray = React.Children.toArray(children);
+  const header = childArray.find(
+    (child) => React.isValidElement(child) && child.type === Header
+  );
+  const content = childArray.find(
+    (child) => React.isValidElement(child) && child.type === Content
+  );
+  const footer = childArray.find(
+    (child) => React.isValidElement(child) && child.type === Footer
+  );
+  const gridRows = cn(
+    "sg:grid",
+    header && footer && "sg:grid-rows-[auto_1fr_auto]",
+    header && !footer && "sg:grid-rows-[auto_1fr]",
+    !header && footer && "sg:grid-rows-[1fr_auto]",
+    !header && !footer && "sg:grid-rows-[1fr]",
+    className
+  );
+  return /* @__PURE__ */ jsxs(Component, { className: gridRows, ...rest, children: [
+    header,
+    content,
+    footer
+  ] });
+}
+function Header({ children, as: Component, ...props }) {
+  if (Component) {
+    return /* @__PURE__ */ jsx(Component, { ...props, children });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+function Content({ children, as: Component, ...props }) {
+  if (Component) {
+    return /* @__PURE__ */ jsx(Component, { ...props, children });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+function Footer({ children, as: Component, ...props }) {
+  if (Component) {
+    return /* @__PURE__ */ jsx(Component, { ...props, children });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+Container.Header = Header;
+Container.Content = Content;
+Container.Footer = Footer;
+export {
+  Container
+};
+//# sourceMappingURL=container.js.map

package/dist/components/templates/container/container.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/templates/container/container.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../../utils/index\";\nimport type { PropsWithChildren } from \"react\";\n\ntype Prop = {\n  children?: React.ReactNode;\n  as?: \"body\" | \"div\";\n} & React.HTMLAttributes<HTMLElement>;\n\nfunction Container({\n  children,\n  as: Component = \"div\",\n  className,\n  ...rest\n}: PropsWithChildren<Prop>) {\n  const childArray = React.Children.toArray(children);\n\n  const header = childArray.find(\n    (child) => React.isValidElement(child) && child.type === Header,\n  );\n  const content = childArray.find(\n    (child) => React.isValidElement(child) && child.type === Content,\n  );\n  const footer = childArray.find(\n    (child) => React.isValidElement(child) && child.type === Footer,\n  );\n\n  const gridRows = cn(\n    \"sg:grid\",\n    header && footer && \"sg:grid-rows-[auto_1fr_auto]\",\n    header && !footer && \"sg:grid-rows-[auto_1fr]\",\n    !header && footer && \"sg:grid-rows-[1fr_auto]\",\n    !header && !footer && \"sg:grid-rows-[1fr]\",\n    className,\n  );\n\n  return (\n    <Component className={gridRows} {...rest}>\n      {header}\n      {content}\n      {footer}\n    </Component>\n  );\n}\n\ntype ChildProp = {\n  children?: React.ReactNode;\n  as?: React.ElementType;\n} & React.HTMLAttributes<HTMLElement>;\n\nfunction Header({ children, as: Component, ...props }: ChildProp) {\n  if (Component) {\n    return <Component {...props}>{children}</Component>;\n  }\n  return <>{children}</>;\n}\n\nfunction Content({ children, as: Component, ...props }: ChildProp) {\n  if (Component) {\n    return <Component {...props}>{children}</Component>;\n  }\n  return <>{children}</>;\n}\n\nfunction Footer({ children, as: Component, ...props }: ChildProp) {\n  if (Component) {\n    return <Component {...props}>{children}</Component>;\n  }\n  return <>{children}</>;\n}\n\nContainer.Header = Header;\nContainer.Content = Content;\nContainer.Footer = Footer;\n\nexport { Container };\n"],"mappings":"AAqCI,SAiBK,UAFE,KAfP;AArCJ,YAAY,WAAW;AACvB,SAAS,UAAU;AAQnB,SAAS,UAAU;AAAA,EACjB;AAAA,EACA,IAAI,YAAY;AAAA,EAChB;AAAA,EACA,GAAG;AACL,GAA4B;AAC1B,QAAM,aAAa,MAAM,SAAS,QAAQ,QAAQ;AAElD,QAAM,SAAS,WAAW;AAAA,IACxB,CAAC,UAAU,MAAM,eAAe,KAAK,KAAK,MAAM,SAAS;AAAA,EAC3D;AACA,QAAM,UAAU,WAAW;AAAA,IACzB,CAAC,UAAU,MAAM,eAAe,KAAK,KAAK,MAAM,SAAS;AAAA,EAC3D;AACA,QAAM,SAAS,WAAW;AAAA,IACxB,CAAC,UAAU,MAAM,eAAe,KAAK,KAAK,MAAM,SAAS;AAAA,EAC3D;AAEA,QAAM,WAAW;AAAA,IACf;AAAA,IACA,UAAU,UAAU;AAAA,IACpB,UAAU,CAAC,UAAU;AAAA,IACrB,CAAC,UAAU,UAAU;AAAA,IACrB,CAAC,UAAU,CAAC,UAAU;AAAA,IACtB;AAAA,EACF;AAEA,SACE,qBAAC,aAAU,WAAW,UAAW,GAAG,MACjC;AAAA;AAAA,IACA;AAAA,IACA;AAAA,KACH;AAEJ;AAOA,SAAS,OAAO,EAAE,UAAU,IAAI,WAAW,GAAG,MAAM,GAAc;AAChE,MAAI,WAAW;AACb,WAAO,oBAAC,aAAW,GAAG,OAAQ,UAAS;AAAA,EACzC;AACA,SAAO,gCAAG,UAAS;AACrB;AAEA,SAAS,QAAQ,EAAE,UAAU,IAAI,WAAW,GAAG,MAAM,GAAc;AACjE,MAAI,WAAW;AACb,WAAO,oBAAC,aAAW,GAAG,OAAQ,UAAS;AAAA,EACzC;AACA,SAAO,gCAAG,UAAS;AACrB;AAEA,SAAS,OAAO,EAAE,UAAU,IAAI,WAAW,GAAG,MAAM,GAAc;AAChE,MAAI,WAAW;AACb,WAAO,oBAAC,aAAW,GAAG,OAAQ,UAAS;AAAA,EACzC;AACA,SAAO,gCAAG,UAAS;AACrB;AAEA,UAAU,SAAS;AACnB,UAAU,UAAU;AACpB,UAAU,SAAS;","names":[]}

package/dist/components/templates/footer/footer.d.ts

@@ -0,0 +1,5 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare function Footer(): react_jsx_runtime.JSX.Element;
+
+export { Footer };

package/dist/components/templates/footer/footer.js

@@ -0,0 +1,12 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Layout, TextSpan } from "../../primitives/index.js";
+function Footer() {
+  return /* @__PURE__ */ jsx(Layout, { as: "footer", className: "sg:border-t sg:mt-auto sg:py-12", children: /* @__PURE__ */ jsx(Layout.Col1, { className: "sg:text-center", children: /* @__PURE__ */ jsxs(TextSpan, { size: "xl", fontweight: "bold", foreground: "primary", children: [
+    "filion",
+    /* @__PURE__ */ jsx(TextSpan, { size: "xl", fontweight: "bold", foreground: "secondary", children: "." })
+  ] }) }) });
+}
+export {
+  Footer
+};
+//# sourceMappingURL=footer.js.map

package/dist/components/templates/footer/footer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/templates/footer/footer.tsx"],"sourcesContent":["import { Layout, TextSpan } from \"../../primitives/index\";\r\n\r\nfunction Footer() {\r\n  return (\r\n    <Layout as=\"footer\" className=\"sg:border-t sg:mt-auto sg:py-12\">\r\n      <Layout.Col1 className=\"sg:text-center\">\r\n        <TextSpan size=\"xl\" fontweight=\"bold\" foreground=\"primary\">\r\n          filion\r\n          <TextSpan size=\"xl\" fontweight=\"bold\" foreground=\"secondary\">\r\n            .\r\n          </TextSpan>\r\n        </TextSpan>\r\n      </Layout.Col1>\r\n    </Layout>\r\n  );\r\n}\r\n\r\nexport { Footer };\r\n"],"mappings":"AAMQ,SAEE,KAFF;AANR,SAAS,QAAQ,gBAAgB;AAEjC,SAAS,SAAS;AAChB,SACE,oBAAC,UAAO,IAAG,UAAS,WAAU,mCAC5B,8BAAC,OAAO,MAAP,EAAY,WAAU,kBACrB,+BAAC,YAAS,MAAK,MAAK,YAAW,QAAO,YAAW,WAAU;AAAA;AAAA,IAEzD,oBAAC,YAAS,MAAK,MAAK,YAAW,QAAO,YAAW,aAAY,eAE7D;AAAA,KACF,GACF,GACF;AAEJ;","names":[]}

package/dist/components/templates/form/form.d.ts

@@ -0,0 +1,5 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare function Form(): react_jsx_runtime.JSX.Element;
+
+export { Form as default };

package/dist/components/templates/form/form.js

@@ -0,0 +1,141 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  Button,
+  Checkbox,
+  Input,
+  Layout,
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Textarea
+} from "../../primitives/index.js";
+import {
+  Field,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet
+} from "../../primitives/forms/field.js";
+const months = [
+  { label: "MM", value: null },
+  { label: "01", value: "01" },
+  { label: "02", value: "02" },
+  { label: "03", value: "03" },
+  { label: "04", value: "04" },
+  { label: "05", value: "05" },
+  { label: "06", value: "06" },
+  { label: "07", value: "07" },
+  { label: "08", value: "08" },
+  { label: "09", value: "09" },
+  { label: "10", value: "10" },
+  { label: "11", value: "11" },
+  { label: "12", value: "12" }
+];
+const years = [
+  { label: "YYYY", value: null },
+  { label: "2024", value: "2024" },
+  { label: "2025", value: "2025" },
+  { label: "2026", value: "2026" },
+  { label: "2027", value: "2027" },
+  { label: "2028", value: "2028" },
+  { label: "2029", value: "2029" }
+];
+function Form() {
+  return /* @__PURE__ */ jsx(Layout, { children: /* @__PURE__ */ jsx(Layout.Col1, { children: /* @__PURE__ */ jsx("form", { children: /* @__PURE__ */ jsxs(FieldGroup, { children: [
+    /* @__PURE__ */ jsxs(FieldSet, { children: [
+      /* @__PURE__ */ jsx(FieldLegend, { children: "Payment Method" }),
+      /* @__PURE__ */ jsx(FieldDescription, { children: "All transactions are secure and encrypted" }),
+      /* @__PURE__ */ jsxs(FieldGroup, { children: [
+        /* @__PURE__ */ jsxs(Field, { children: [
+          /* @__PURE__ */ jsx(FieldLabel, { htmlFor: "checkout-7j9-card-name-43j", children: "Name on Card" }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: "checkout-7j9-card-name-43j",
+              placeholder: "Evil Rabbit",
+              required: true
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(Field, { children: [
+          /* @__PURE__ */ jsx(FieldLabel, { htmlFor: "checkout-7j9-card-number-uw1", children: "Card Number" }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: "checkout-7j9-card-number-uw1",
+              placeholder: "1234 5678 9012 3456",
+              required: true
+            }
+          ),
+          /* @__PURE__ */ jsx(FieldDescription, { children: "Enter your 16-digit card number" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-4", children: [
+          /* @__PURE__ */ jsxs(Field, { children: [
+            /* @__PURE__ */ jsx(FieldLabel, { htmlFor: "checkout-exp-month-ts6", children: "Month" }),
+            /* @__PURE__ */ jsxs(Select, { items: months, children: [
+              /* @__PURE__ */ jsx(SelectTrigger, { id: "checkout-exp-month-ts6", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+              /* @__PURE__ */ jsx(SelectContent, { children: /* @__PURE__ */ jsx(SelectGroup, { children: months.map((item) => /* @__PURE__ */ jsx(SelectItem, { value: item.value, children: item.label }, item.value)) }) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(Field, { children: [
+            /* @__PURE__ */ jsx(FieldLabel, { htmlFor: "checkout-7j9-exp-year-f59", children: "Year" }),
+            /* @__PURE__ */ jsxs(Select, { items: years, children: [
+              /* @__PURE__ */ jsx(SelectTrigger, { id: "checkout-7j9-exp-year-f59", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+              /* @__PURE__ */ jsx(SelectContent, { children: /* @__PURE__ */ jsx(SelectGroup, { children: years.map((item) => /* @__PURE__ */ jsx(SelectItem, { value: item.value, children: item.label }, item.value)) }) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(Field, { children: [
+            /* @__PURE__ */ jsx(FieldLabel, { htmlFor: "checkout-7j9-cvv", children: "CVV" }),
+            /* @__PURE__ */ jsx(Input, { id: "checkout-7j9-cvv", placeholder: "123", required: true })
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(FieldSeparator, {}),
+    /* @__PURE__ */ jsxs(FieldSet, { children: [
+      /* @__PURE__ */ jsx(FieldLegend, { children: "Billing Address" }),
+      /* @__PURE__ */ jsx(FieldDescription, { children: "The billing address associated with your payment method" }),
+      /* @__PURE__ */ jsx(FieldGroup, { children: /* @__PURE__ */ jsxs(Field, { orientation: "horizontal", children: [
+        /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            id: "checkout-7j9-same-as-shipping-wgm",
+            defaultChecked: true
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          FieldLabel,
+          {
+            htmlFor: "checkout-7j9-same-as-shipping-wgm",
+            className: "font-normal",
+            children: "Same as shipping address"
+          }
+        )
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsx(FieldSet, { children: /* @__PURE__ */ jsx(FieldGroup, { children: /* @__PURE__ */ jsxs(Field, { children: [
+      /* @__PURE__ */ jsx(FieldLabel, { htmlFor: "checkout-7j9-optional-comments", children: "Comments" }),
+      /* @__PURE__ */ jsx(
+        Textarea,
+        {
+          id: "checkout-7j9-optional-comments",
+          placeholder: "Add any additional comments",
+          className: "resize-none"
+        }
+      )
+    ] }) }) }),
+    /* @__PURE__ */ jsxs(Field, { orientation: "horizontal", children: [
+      /* @__PURE__ */ jsx(Button, { type: "submit", children: "Submit" }),
+      /* @__PURE__ */ jsx(Button, { variant: "outline", type: "button", children: "Cancel" })
+    ] })
+  ] }) }) }) });
+}
+export {
+  Form as default
+};
+//# sourceMappingURL=form.js.map

package/dist/components/templates/form/form.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/templates/form/form.tsx"],"sourcesContent":["import {\r\n  Button,\r\n  Checkbox,\r\n  Input,\r\n  Layout,\r\n  Select,\r\n  SelectContent,\r\n  SelectGroup,\r\n  SelectItem,\r\n  SelectTrigger,\r\n  SelectValue,\r\n  Textarea,\r\n} from \"../../primitives/index\";\r\nimport {\r\n  Field,\r\n  FieldDescription,\r\n  FieldGroup,\r\n  FieldLabel,\r\n  FieldLegend,\r\n  FieldSeparator,\r\n  FieldSet,\r\n} from \"../../primitives/forms/field\";\r\n\r\nconst months = [\r\n  { label: \"MM\", value: null },\r\n  { label: \"01\", value: \"01\" },\r\n  { label: \"02\", value: \"02\" },\r\n  { label: \"03\", value: \"03\" },\r\n  { label: \"04\", value: \"04\" },\r\n  { label: \"05\", value: \"05\" },\r\n  { label: \"06\", value: \"06\" },\r\n  { label: \"07\", value: \"07\" },\r\n  { label: \"08\", value: \"08\" },\r\n  { label: \"09\", value: \"09\" },\r\n  { label: \"10\", value: \"10\" },\r\n  { label: \"11\", value: \"11\" },\r\n  { label: \"12\", value: \"12\" },\r\n];\r\n\r\nconst years = [\r\n  { label: \"YYYY\", value: null },\r\n  { label: \"2024\", value: \"2024\" },\r\n  { label: \"2025\", value: \"2025\" },\r\n  { label: \"2026\", value: \"2026\" },\r\n  { label: \"2027\", value: \"2027\" },\r\n  { label: \"2028\", value: \"2028\" },\r\n  { label: \"2029\", value: \"2029\" },\r\n];\r\n\r\nexport default function Form() {\r\n  return (\r\n    <Layout>\r\n      <Layout.Col1>\r\n        <form>\r\n          <FieldGroup>\r\n            <FieldSet>\r\n              <FieldLegend>Payment Method</FieldLegend>\r\n              <FieldDescription>\r\n                All transactions are secure and encrypted\r\n              </FieldDescription>\r\n              <FieldGroup>\r\n                <Field>\r\n                  <FieldLabel htmlFor=\"checkout-7j9-card-name-43j\">\r\n                    Name on Card\r\n                  </FieldLabel>\r\n                  <Input\r\n                    id=\"checkout-7j9-card-name-43j\"\r\n                    placeholder=\"Evil Rabbit\"\r\n                    required\r\n                  />\r\n                </Field>\r\n                <Field>\r\n                  <FieldLabel htmlFor=\"checkout-7j9-card-number-uw1\">\r\n                    Card Number\r\n                  </FieldLabel>\r\n                  <Input\r\n                    id=\"checkout-7j9-card-number-uw1\"\r\n                    placeholder=\"1234 5678 9012 3456\"\r\n                    required\r\n                  />\r\n                  <FieldDescription>\r\n                    Enter your 16-digit card number\r\n                  </FieldDescription>\r\n                </Field>\r\n                <div className=\"grid grid-cols-3 gap-4\">\r\n                  <Field>\r\n                    <FieldLabel htmlFor=\"checkout-exp-month-ts6\">\r\n                      Month\r\n                    </FieldLabel>\r\n                    <Select items={months}>\r\n                      <SelectTrigger id=\"checkout-exp-month-ts6\">\r\n                        <SelectValue />\r\n                      </SelectTrigger>\r\n                      <SelectContent>\r\n                        <SelectGroup>\r\n                          {months.map((item) => (\r\n                            <SelectItem key={item.value} value={item.value}>\r\n                              {item.label}\r\n                            </SelectItem>\r\n                          ))}\r\n                        </SelectGroup>\r\n                      </SelectContent>\r\n                    </Select>\r\n                  </Field>\r\n                  <Field>\r\n                    <FieldLabel htmlFor=\"checkout-7j9-exp-year-f59\">\r\n                      Year\r\n                    </FieldLabel>\r\n                    <Select items={years}>\r\n                      <SelectTrigger id=\"checkout-7j9-exp-year-f59\">\r\n                        <SelectValue />\r\n                      </SelectTrigger>\r\n                      <SelectContent>\r\n                        <SelectGroup>\r\n                          {years.map((item) => (\r\n                            <SelectItem key={item.value} value={item.value}>\r\n                              {item.label}\r\n                            </SelectItem>\r\n                          ))}\r\n                        </SelectGroup>\r\n                      </SelectContent>\r\n                    </Select>\r\n                  </Field>\r\n                  <Field>\r\n                    <FieldLabel htmlFor=\"checkout-7j9-cvv\">CVV</FieldLabel>\r\n                    <Input id=\"checkout-7j9-cvv\" placeholder=\"123\" required />\r\n                  </Field>\r\n                </div>\r\n              </FieldGroup>\r\n            </FieldSet>\r\n            <FieldSeparator />\r\n            <FieldSet>\r\n              <FieldLegend>Billing Address</FieldLegend>\r\n              <FieldDescription>\r\n                The billing address associated with your payment method\r\n              </FieldDescription>\r\n              <FieldGroup>\r\n                <Field orientation=\"horizontal\">\r\n                  <Checkbox\r\n                    id=\"checkout-7j9-same-as-shipping-wgm\"\r\n                    defaultChecked\r\n                  />\r\n                  <FieldLabel\r\n                    htmlFor=\"checkout-7j9-same-as-shipping-wgm\"\r\n                    className=\"font-normal\"\r\n                  >\r\n                    Same as shipping address\r\n                  </FieldLabel>\r\n                </Field>\r\n              </FieldGroup>\r\n            </FieldSet>\r\n            <FieldSet>\r\n              <FieldGroup>\r\n                <Field>\r\n                  <FieldLabel htmlFor=\"checkout-7j9-optional-comments\">\r\n                    Comments\r\n                  </FieldLabel>\r\n                  <Textarea\r\n                    id=\"checkout-7j9-optional-comments\"\r\n                    placeholder=\"Add any additional comments\"\r\n                    className=\"resize-none\"\r\n                  />\r\n                </Field>\r\n              </FieldGroup>\r\n            </FieldSet>\r\n            <Field orientation=\"horizontal\">\r\n              <Button type=\"submit\">Submit</Button>\r\n              <Button variant=\"outline\" type=\"button\">\r\n                Cancel\r\n              </Button>\r\n            </Field>\r\n          </FieldGroup>\r\n        </form>\r\n      </Layout.Col1>\r\n    </Layout>\r\n  );\r\n}\r\n"],"mappings":"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","names":[]}