@cryptlex/web-components 5.2.0 → 5.3.0

package/dist/components/ui/table.d.ts

@@ -0,0 +1,9 @@
+import type * as React from "react";
+export declare function Table({ className, ...props }: React.ComponentProps<"table">): import("react/jsx-runtime").JSX.Element;
+export declare function TableHeader({ className, ...props }: React.ComponentProps<"thead">): import("react/jsx-runtime").JSX.Element;
+export declare function TableBody({ className, ...props }: React.ComponentProps<"tbody">): import("react/jsx-runtime").JSX.Element;
+export declare function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">): import("react/jsx-runtime").JSX.Element;
+export declare function TableRow({ className, ...props }: React.ComponentProps<"tr">): import("react/jsx-runtime").JSX.Element;
+export declare function TableHead({ className, ...props }: React.ComponentProps<"th">): import("react/jsx-runtime").JSX.Element;
+export declare function TableCell({ className, ...props }: React.ComponentProps<"td">): import("react/jsx-runtime").JSX.Element;
+export declare function TableCaption({ className, ...props }: React.ComponentProps<"caption">): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/table.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "lib/utils/primitives";
+export function Table({ className, ...props }) {
+    return (_jsx("table", { className: cn("caption-bottom text-sm [&_tr:last-child]:border-0 my-0 whitespace-nowrap", className), ...props }));
+}
+export function TableHeader({ className, ...props }) {
+    return (_jsx("thead", { className: cn("[&_tr]:border-b border-b", className), ...props }));
+}
+export function TableBody({ className, ...props }) {
+    return _jsx("tbody", { className: cn(className), ...props });
+}
+export function TableFooter({ className, ...props }) {
+    return (_jsx("tfoot", { className: cn("border-t font-medium last:[&>tr]:border-b-0", className), ...props }));
+}
+export function TableRow({ className, ...props }) {
+    return _jsx("tr", { className: cn("border-b border-border", className), ...props });
+}
+export function TableHead({ className, ...props }) {
+    return (_jsx("th", { className: cn("text-left align-middle font-medium", className), ...props }));
+}
+export function TableCell({ className, ...props }) {
+    return (_jsx("td", { className: cn("[&_tr:last-child]:border-dotted", className), ...props }));
+}
+export function TableCaption({ className, ...props }) {
+    return (_jsx("caption", { className: cn("mt-icon text-sm text-muted-foreground", className), ...props }));
+}

package/dist/components/ui/tabs.d.ts

@@ -0,0 +1,5 @@
+import { TabListProps as AriaTabListProps, TabPanelProps as AriaTabPanelProps, TabProps as AriaTabProps, TabsProps as AriaTabsProps } from "react-aria-components";
+export declare function Tabs({ className, ...props }: AriaTabsProps): import("react/jsx-runtime").JSX.Element;
+export declare function TabList<T extends object>({ className, ...props }: AriaTabListProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function Tab({ className, ...props }: AriaTabProps): import("react/jsx-runtime").JSX.Element;
+export declare function TabPanel({ className, ...props }: AriaTabPanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/tabs.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tab as AriaTab, TabList as AriaTabList, TabPanel as AriaTabPanel, Tabs as AriaTabs, composeRenderProps, } from "react-aria-components";
+import { cn } from "lib/utils/primitives";
+export function Tabs({ className, ...props }) {
+    return (_jsx(AriaTabs, { className: composeRenderProps(className, (className) => cn("group flex flex-col gap-2", 
+        /* Orientation */
+        "data-[orientation=vertical]:flex-row", className)), ...props }));
+}
+export function TabList({ className, ...props }) {
+    return (_jsx(AriaTabList, { className: composeRenderProps(className, (className) => cn("inline-flex items-center border-b text-muted-foreground", 
+        /* Orientation */
+        "data-[orientation=vertical]:h-auto data-[orientation=vertical]:flex-col", className)), ...props }));
+}
+export function Tab({ className, ...props }) {
+    return (_jsx(AriaTab, { className: composeRenderProps(className, (className) => cn("btn btn-ghost leading-none text-accent h-input truncate inline-flex items-center px-3 body font-medium transition-all", 
+        /* Selected */
+        "data-[selected]:bg-primary/20 data-[selected]:text-primary", 
+        /* Orientation */
+        "group-data-[orientation=vertical]:w-full", className)), ...props }));
+}
+export function TabPanel({ className, ...props }) {
+    return (_jsx(AriaTabPanel, { className: composeRenderProps(className, (className) => cn("ring-offset-background", 
+        /* Focus Visible */
+        "focus-ring", className)), ...props }));
+}

package/dist/components/ui/timeline.d.ts

@@ -0,0 +1,15 @@
+import { type VariantProps } from "class-variance-authority";
+import type { LucideIcon } from "lucide-react";
+export declare function Timeline({ className, ...props }: React.ComponentProps<'ol'>): import("react/jsx-runtime").JSX.Element;
+export declare function TimelineItem({ className, ...props }: React.ComponentProps<'li'> & {}): import("react/jsx-runtime").JSX.Element;
+export declare const timelineIconVariants: (props?: ({
+    variant?: "destructive" | "success" | "muted" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare function TimelineIcon({ icon: Icon, className, variant, ...props }: Omit<React.ComponentProps<'div'>, 'children'> & VariantProps<typeof timelineIconVariants> & {
+    icon: LucideIcon;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function TimelineDate({ className, date, dateFormatter, ...props }: Omit<React.ComponentProps<'time'>, 'dateTime' | 'children'> & {
+    date: Date;
+    dateFormatter?: (d: Date) => string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function TimelineContent({ className, ...props }: React.ComponentProps<'section'>): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/timeline.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "lib/utils/primitives";
+export function Timeline({ className, ...props }) {
+    return _jsx("ol", { className: cn("grid grid-col-1 gap-icon", className), ...props });
+}
+export function TimelineItem({ className, ...props }) {
+    return (_jsx("li", { className: cn("grid grid-cols-[4rem_2rem_1fr] grid-rows-subgrid list-none gap-icon", className), ...props }));
+}
+export const timelineIconVariants = cva(`p-1 rounded-full`, {
+    variants: {
+        variant: {
+            destructive: "text-destructive-foreground bg-destructive",
+            success: "text-success-foreground bg-success",
+            muted: "text-muted-foreground bg-muted",
+        },
+    },
+    defaultVariants: {
+        variant: "muted",
+    },
+});
+export function TimelineIcon({ icon: Icon, className, variant, ...props }) {
+    return _jsxs("div", { ...props, className: "flex flex-col items-center gap-2", children: [_jsx("div", { className: cn(timelineIconVariants({ variant, className })), children: _jsx(Icon, { className: "size-icon " }) }), _jsx("div", { className: "h-full w-[1px]" })] });
+}
+export function TimelineDate({ className, date, dateFormatter, ...props }) {
+    const defaultDateDisplay = `${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getFullYear()}`;
+    return _jsx("time", { ...props, dateTime: date.toISOString(), className: cn("font-mono leading-none text-muted", className), children: dateFormatter ? dateFormatter(date) : defaultDateDisplay });
+}
+export function TimelineContent({ className, ...props }) {
+    return _jsx("section", { className: cn("", className), ...props });
+}

package/dist/components/ui/tooltip.d.ts

@@ -0,0 +1,4 @@
+import { TooltipTrigger as AriaTooltipTrigger, type TooltipProps as AriaTooltipProps } from "react-aria-components";
+declare const TooltipTrigger: typeof AriaTooltipTrigger;
+declare const Tooltip: ({ className, offset, ...props }: AriaTooltipProps) => import("react/jsx-runtime").JSX.Element;
+export { Tooltip, TooltipTrigger };

package/dist/components/ui/tooltip.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tooltip as AriaTooltip, TooltipTrigger as AriaTooltipTrigger, composeRenderProps, } from "react-aria-components";
+import { cn } from "lib/utils/primitives";
+const TooltipTrigger = AriaTooltipTrigger;
+const Tooltip = ({ className, offset = 4, ...props }) => (_jsx(AriaTooltip, { offset: offset, className: composeRenderProps(className, (className) => cn("z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0", 
+    /* Entering */
+    "data-[entering]:zoom-in-95", 
+    /* Exiting */
+    "data-[exiting]:animate-out data-[exiting]:fade-out-0 data-[exiting]:zoom-out-95", 
+    /* Placement */
+    "data-[placement=bottom]:slide-in-from-top-2 data-[placement=left]:slide-in-from-right-2 data-[placement=right]:slide-in-from-left-2 data-[placement=top]:slide-in-from-bottom-2", className)), ...props }));
+export { Tooltip, TooltipTrigger };

package/dist/utils/form-context.d.ts

@@ -0,0 +1,4 @@
+/**
+ * useFieldContext is used in custom components
+ */
+export declare const fieldContext: import("react").Context<import("@tanstack/react-form").AnyFieldApi>, formContext: import("react").Context<import("@tanstack/react-form").AnyFormApi>, useFieldContext: <TData>() => import("@tanstack/react-form").FieldApi<any, string, TData, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any>;

package/{lib/utils/form-context.tsx → dist/utils/form-context.js}

@@ -1,7 +1,5 @@
 import { createFormHookContexts } from "@tanstack/react-form";
-
 /**
  * useFieldContext is used in custom components
  */
-export const { fieldContext, formContext, useFieldContext } =
-	createFormHookContexts();
+export const { fieldContext, formContext, useFieldContext } = createFormHookContexts();

package/dist/utils/form-hook.d.ts

@@ -0,0 +1,25 @@
+import { type FieldApi } from "@tanstack/react-form";
+import { TfCheckbox } from "lib/components/inputs/checkbox";
+import { TfMultiSelect } from "lib/components/inputs/multi-select";
+import { TfNumberField } from "lib/components/inputs/numberfield";
+import { TfSingleSelect } from "lib/components/inputs/select";
+import { TfTextField } from "lib/components/inputs/textfield";
+import { Button } from "lib/components/ui/button";
+export declare function getFieldErrorMessage(field: FieldApi<any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any>): string;
+/** Don't put this in the same file as form-context.tsx, this causes circular dependencies. */
+/** TODO, lazy loading when fieldComponents are large */
+/**
+ * Builder for form logic and user interfaces
+ */
+export declare const useAppForm: <TFormData, TOnMount extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChange extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChangeAsync extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnBlurAsync extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnServer extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TSubmitMeta>(props: import("@tanstack/react-form").FormOptions<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnServer, TSubmitMeta>) => import("@tanstack/react-form").FormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnServer, TSubmitMeta> & import("@tanstack/react-form").ReactFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnServer, TSubmitMeta> & NoInfer<{
+    readonly Button: typeof Button;
+}> & {
+    AppField: import("@tanstack/react-form").FieldComponent<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnServer, TSubmitMeta, NoInfer<{
+        readonly TfTextField: typeof TfTextField;
+        readonly TfNumberField: typeof TfNumberField;
+        readonly TfMultiSelect: typeof TfMultiSelect;
+        readonly TfSingleSelect: typeof TfSingleSelect;
+        readonly TfCheckbox: typeof TfCheckbox;
+    }>>;
+    AppForm: import("react").ComponentType<import("react").PropsWithChildren>;
+};

package/{lib/utils/form-hook.tsx → dist/utils/form-hook.js}

@@ -1,4 +1,4 @@
-import { createFormHook, type FieldApi } from "@tanstack/react-form";
+import { createFormHook } from "@tanstack/react-form";
 import { TfCheckbox } from "lib/components/inputs/checkbox";
 import { TfMultiSelect } from "lib/components/inputs/multi-select";
 import { TfNumberField } from "lib/components/inputs/numberfield";
@@ -6,28 +6,25 @@ import { TfSingleSelect } from "lib/components/inputs/select";
 import { TfTextField } from "lib/components/inputs/textfield";
 import { Button } from "lib/components/ui/button";
 import { fieldContext, formContext } from "lib/utils/form-context";
-
-export function getFieldErrorMessage(field: FieldApi<any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any>): string {
-	return field?.state.meta.errors.map((e) => e?.message).join(",")
+export function getFieldErrorMessage(field) {
+    return field?.state.meta.errors.map((e) => e?.message).join(",");
 }
-
 /** Don't put this in the same file as form-context.tsx, this causes circular dependencies. */
-
 /** TODO, lazy loading when fieldComponents are large */
 /**
  * Builder for form logic and user interfaces
  */
 export const { useAppForm } = createFormHook({
-	fieldComponents: {
-		TfTextField,
-		TfNumberField,
-		TfMultiSelect,
-		TfSingleSelect,
-		TfCheckbox,
-	},
-	formComponents: {
-		Button,
-	},
-	fieldContext,
-	formContext,
+    fieldComponents: {
+        TfTextField,
+        TfNumberField,
+        TfMultiSelect,
+        TfSingleSelect,
+        TfCheckbox,
+    },
+    formComponents: {
+        Button,
+    },
+    fieldContext,
+    formContext,
 });

package/dist/utils/primitives.d.ts

@@ -0,0 +1,30 @@
+import { type ClassValue } from "clsx";
+/** Classnames */
+export declare function cn(...inputs: ClassValue[]): string;
+/**
+ *
+ * @returns
+ */
+export declare function getThemeHue(): string;
+/**
+ * @param hue the hue value to set in the document style
+ */
+export declare function setThemeHue(hue: number): void;
+export declare function logout(): void;
+export type JwtDecode = {
+    aud: string;
+    email: string;
+    exp: number;
+    iat: number;
+    jti: string;
+    region: string;
+    role: string;
+    role_type: string;
+    scope: string[];
+    sub: string;
+    teat: number;
+    tenantid: string;
+    token_usage: string;
+    sadmin?: string;
+};
+export type CtxPortals = "customer-portal" | "system-portal" | "reseller-portal" | "admin-portal";

package/{lib/utils/primitives.ts → dist/utils/primitives.js}

@@ -1,16 +1,13 @@
-import { clsx, type ClassValue } from "clsx";
-
+import { clsx } from "clsx";
 /** Classnames */
-export function cn(...inputs: ClassValue[]) {
+export function cn(...inputs) {
     return clsx(inputs);
 }
-
 /**
  * This is the variable name representing the primary hue.
  * Referenced in tokens.scss -> token.css
  */
 const PRIMARY_HUE_PROPERTY = "--primary-hue";
-
 /**
  *
  * @returns
@@ -18,18 +15,14 @@ const PRIMARY_HUE_PROPERTY = "--primary-hue";
 export function getThemeHue() {
     return document.documentElement.style.getPropertyValue(PRIMARY_HUE_PROPERTY);
 }
-
 /**
  * @param hue the hue value to set in the document style
  */
-export function setThemeHue(hue: number) {
-    document.documentElement.style.setProperty(
-        PRIMARY_HUE_PROPERTY,
-        // In this case, it must be a number.
-        hue as unknown as string,
-    );
+export function setThemeHue(hue) {
+    document.documentElement.style.setProperty(PRIMARY_HUE_PROPERTY, 
+    // In this case, it must be a number.
+    hue);
 }
-
 const ACCESS_TOKEN = "AT";
 const REFRESH_TOKEN = "RT";
 export function logout() {
@@ -38,31 +31,9 @@ export function logout() {
             localStorage.removeItem(REFRESH_TOKEN);
             localStorage.removeItem(ACCESS_TOKEN);
             window.location.replace("/auth/login");
-        } catch (error) {
+        }
+        catch (error) {
             console.error("Logout failed:", error);
         }
     }
 }
-
-export type JwtDecode = {
-    aud: string;
-    email: string;
-    exp: number;
-    iat: number;
-    jti: string;
-    region: string;
-    role: string;
-    role_type: string;
-    scope: string[];
-    sub: string;
-    teat: number;
-    tenantid: string;
-    token_usage: string;
-    sadmin?: string;
-};
-
-export type CtxPortals =
-    | "customer-portal"
-    | "system-portal"
-    | "reseller-portal"
-    | "admin-portal";

package/dist/utils/resource-names.d.ts

@@ -0,0 +1,23 @@
+import type { CtxPortals } from "lib/utils/primitives";
+/**
+ *
+ * @param input camelCase
+ * @returns title case for the camelCase string
+ */
+export declare function convertToTitleCase(input: string): string;
+export declare function pluralizeTimes(resourceName: string, count: number): string;
+/**
+ * Converts a string from 'camelCase' to 'Title Case'
+ * @param input String to convert to `Title Case`
+ */
+export declare function convertCamelCaseToTitleCase(input: string): string;
+/** Resource Name should ALWAYS be in singular form */
+export declare const RESOURCE_NAMES: readonly ["access-token", "account", "activation", "activation-log", "admin-role", "audit-log", "automated-email", "automated-email-event-log", "card", "feature-flag", "invoice", "license", "license-template", "maintenance-policy", "organization", "plan", "product", "product-version", "profile", "release", "release-channel", "release-file", "release-platform", "report", "role", "role-claim", "saml-configuration", "segment", "sending-domain", "setting", "tag", "team-member", "trial", "trial-policy", "user", "user-group", "webhook", "webhook-event-log", "webhook-trigger", "reseller", "oidc-configuration", "organization-claim", "reseller-claim"];
+export type ResourceName = (typeof RESOURCE_NAMES)[number];
+export declare const RESOURCE_DEFINITIONS: Record<ResourceName, string>;
+export declare function ProjectProvider({ projectName, children }: {
+    projectName: CtxPortals;
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useProjectName(): CtxPortals;
+export declare function useResourceFormatter(): (resourceName: string) => string;

package/{lib/utils/resource-names.tsx → dist/utils/resource-names.js}

@@ -1,12 +1,11 @@
-import type { CtxPortals } from "lib/utils/primitives";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, use } from "react";
-
 /**
  *
  * @param input camelCase
  * @returns title case for the camelCase string
  */
-export function convertToTitleCase(input: string): string {
+export function convertToTitleCase(input) {
     return input
         .replace(/([A-Z])/g, " $1") // Insert space before capital letters
         .trim() // Remove any leading/trailing spaces
@@ -14,41 +13,38 @@ export function convertToTitleCase(input: string): string {
         .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()) // Capitalize each word
         .join(" "); // Join back into a single string
 }
-
-export function pluralizeTimes(resourceName: string, count: number) {
+export function pluralizeTimes(resourceName, count) {
     if (count > 1) {
         if (/y$/.test(resourceName)) {
-            if (resourceName === "Day") return "Days";
+            if (resourceName === "Day")
+                return "Days";
             return resourceName.replace(/y$/, "ies");
         }
         return resourceName.concat("s");
     }
     return resourceName;
 }
-
 /**
  * Converts a string from 'camelCase' to 'Title Case'
  * @param input String to convert to `Title Case`
  */
-export function convertCamelCaseToTitleCase(input: string) {
+export function convertCamelCaseToTitleCase(input) {
     if (input) {
         const spacedString = input.replace(/([A-Z])/g, " $1");
         return spacedString
             .charAt(0)
             .toUpperCase()
             .concat(spacedString.slice(1))
-            .replace(/\.[a-z]/, (substr: string) => {
-                return substr.replace(".", " ").toUpperCase();
-            });
+            .replace(/\.[a-z]/, (substr) => {
+            return substr.replace(".", " ").toUpperCase();
+        });
     }
     return input;
 }
-
 // Display names specific to customer and reseller portal
-const OTHER_PORTALS_DISPLAY_NAME: Record<string, string> = {
+const OTHER_PORTALS_DISPLAY_NAME = {
     "product.displayName": "Product",
 };
-
 /** Resource Name should ALWAYS be in singular form */
 export const RESOURCE_NAMES = [
     "access-token",
@@ -94,72 +90,53 @@ export const RESOURCE_NAMES = [
     "oidc-configuration",
     "organization-claim",
     "reseller-claim",
-] as const;
-export type ResourceName = (typeof RESOURCE_NAMES)[number];
-export const RESOURCE_DEFINITIONS: Record<ResourceName, string> = {
+];
+export const RESOURCE_DEFINITIONS = {
     account: "Your organization account.",
     product: "Products are the software products you want to license",
-    license:
-        "Licenses represent a purchase of your software. These can be linked to customers, and the license key is required to use the product.",
+    license: "Licenses represent a purchase of your software. These can be linked to customers, and the license key is required to use the product.",
     "access-token": "Access Tokens are used to authenticate your API requests.",
-    activation:
-        "Activations, also known as devices/machines/seats are the devices consuming licenses.",
-    "activation-log":
-        "Activation Log is a log entry of activation/deactivation of a particular license.",
-    trial:
-        "Trial/Trial Activation is a device that has activated a trial of your product.",
+    activation: "Activations, also known as devices/machines/seats are the devices consuming licenses.",
+    "activation-log": "Activation Log is a log entry of activation/deactivation of a particular license.",
+    trial: "Trial/Trial Activation is a device that has activated a trial of your product.",
     "audit-log": "Audit logs contain all the changes made to your account.",
-    "automated-email":
-        "Automated Email allow you to send marketing emails based on events on the linked product.",
-    "automated-email-event-log":
-        "Automated email event log is the log of all the automated email events for your product.",
+    "automated-email": "Automated Email allow you to send marketing emails based on events on the linked product.",
+    "automated-email-event-log": "Automated email event log is the log of all the automated email events for your product.",
     card: "The payment card for your account.",
-    "feature-flag":
-        "Feature flags define features that make up tiers for your products.",
+    "feature-flag": "Feature flags define features that make up tiers for your products.",
     invoice: "",
-    "license-template":
-        "License templates are a blueprint for the licenses you create for your customers and prevent repetition when creating licenses.",
-    "maintenance-policy":
-        "Maintenance policies represent support contracts and can be linked to licenses.",
+    "license-template": "License templates are a blueprint for the licenses you create for your customers and prevent repetition when creating licenses.",
+    "maintenance-policy": "Maintenance policies represent support contracts and can be linked to licenses.",
     plan: "",
-    "product-version":
-        "Product Versions are sets of Feature Flags that define the tiers of your products.",
+    "product-version": "Product Versions are sets of Feature Flags that define the tiers of your products.",
     "release-channel": "Release channel is the release channel for your product.",
     "release-file": "Release files are files within your created releases.",
-    "release-platform":
-        'Release Platforms differentiate the target platform for your release. Common platforms include "Windows", "macOS", and "Linux".',
-    release:
-        "Releases help you to manage different versions of your app, and secure distribute it to licensed users.",
+    "release-platform": 'Release Platforms differentiate the target platform for your release. Common platforms include "Windows", "macOS", and "Linux".',
+    release: "Releases help you to manage different versions of your app, and secure distribute it to licensed users.",
     report: "Analytics data for your account",
     "role-claim": "",
     role: "Roles define permissions for your team.",
     "saml-configuration": "",
     segment: "Sets of filters that can be saved to filter resources.",
-    "trial-policy":
-        "Trial policies are templates for creating trials for your products.",
-    "webhook-event-log":
-        "Webhook Event Logs are logs of events that have occured on webhooks.",
+    "trial-policy": "Trial policies are templates for creating trials for your products.",
+    "webhook-event-log": "Webhook Event Logs are logs of events that have occured on webhooks.",
     "webhook-trigger": "",
-    webhook:
-        "Webhooks are HTTP callbacks which are triggered by specific events.",
+    webhook: "Webhooks are HTTP callbacks which are triggered by specific events.",
     organization: "",
     profile: "",
     setting: "",
     tag: "Tags allow you to manage your licenses and customers on the dashboard.",
     "team-member": "Team members can access the account based on their roles.",
     user: "A user refers to your customer whom you want to license your product.",
-    "sending-domain":
-        "Allows Cryptlex to send emails on your behalf using your From Email address",
+    "sending-domain": "Allows Cryptlex to send emails on your behalf using your From Email address",
     "admin-role": "Roles that have type admin",
     "user-group": "Groups of users that you can assign licenses to.",
-    reseller:
-        "Resellers allow you to delegate user management to third parties or partners",
+    reseller: "Resellers allow you to delegate user management to third parties or partners",
     "oidc-configuration": "",
     "organization-claim": "",
     "reseller-claim": "",
 };
-
-const RESOURCE_DISPLAY_NAMES: Record<string, string> = {
+const RESOURCE_DISPLAY_NAMES = {
     id: "ID",
     createdAt: "Creation Date",
     scopes: "Permissions",
@@ -211,35 +188,25 @@ const RESOURCE_DISPLAY_NAMES: Record<string, string> = {
     "reseller.name": "Reseller",
     sendingDomain: "Email Sending Domain",
 };
-
-function getResourceDisplayName(
-    resourceName: string,
-    portal: CtxPortals,
-) {
+function getResourceDisplayName(resourceName, portal) {
     if (portal !== "admin-portal" && resourceName in OTHER_PORTALS_DISPLAY_NAME) {
         return OTHER_PORTALS_DISPLAY_NAME[resourceName];
-    } else if (resourceName in RESOURCE_DISPLAY_NAMES) {
+    }
+    else if (resourceName in RESOURCE_DISPLAY_NAMES) {
         return RESOURCE_DISPLAY_NAMES[resourceName];
-    } else {
+    }
+    else {
         return convertCamelCaseToTitleCase(resourceName);
     }
 }
-
-const ProjectContext = createContext<CtxPortals>('admin-portal');
-
-export function ProjectProvider({ projectName, children }: { projectName: CtxPortals; children: React.ReactNode; }) {
-    return (
-        <ProjectContext.Provider value={projectName}>
-            {children}
-        </ProjectContext.Provider>
-    );
+const ProjectContext = createContext('admin-portal');
+export function ProjectProvider({ projectName, children }) {
+    return (_jsx(ProjectContext.Provider, { value: projectName, children: children }));
 }
-
-export function useProjectName(): CtxPortals {
+export function useProjectName() {
     return use(ProjectContext);
 }
-
-export function useResourceFormatter(): (resourceName: string) => string {
+export function useResourceFormatter() {
     const portal = useProjectName();
-    return (resourceName: string) => getResourceDisplayName(resourceName, portal);
-}
+    return (resourceName) => getResourceDisplayName(resourceName, portal);
+}

package/dist/utils/use-mobile.d.ts

@@ -0,0 +1 @@
+export declare function useIsMobile(): boolean;

package/dist/utils/use-mobile.js

@@ -0,0 +1,15 @@
+import { useEffect, useState } from "react";
+const MOBILE_BREAKPOINT = 768;
+export function useIsMobile() {
+    const [isMobile, setIsMobile] = useState(undefined);
+    useEffect(() => {
+        const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+        const onChange = () => {
+            setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+        };
+        mql.addEventListener("change", onChange);
+        setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+        return () => mql.removeEventListener("change", onChange);
+    }, []);
+    return !!isMobile;
+}

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@cryptlex/web-components",
-  "version": "5.2.0",
+  "version": "5.3.0",
   "description": "React component library for Cryptlex web applications",
   "author": "Cryptlex",
   "type": "module",
   "private": false,
   "exports": {
     "./components/*": {
-      "import": "./lib/components/*"
+      "import": "./dist/components/*"
     },
     "./utils/*": {
-      "import": "./lib/utils/*"
+      "import": "./dist/utils/*"
     },
     "./index.css": "./lib/index.css",
     "./tokens.css": "./lib/tokens.css",
@@ -19,7 +19,12 @@
     "./utilities.css": "./lib/utilities.css"
   },
   "files": [
-    "lib"
+    "dist",
+    "./lib/index.css",
+    "./lib/tokens.css",
+    "./lib/theme.css",
+    "./lib/base.css",
+    "./lib/utilities.css"
   ],
   "repository": {
     "type": "git",
@@ -80,7 +85,7 @@
     "zod": "3.25.20"
   },
   "scripts": {
-    "build": "tsc",
+    "build": "tsc --project tsconfig.build.json",
     "lint": "eslint .",
     "storybook": "storybook dev -p 6006 --no-open",
     "build:storybook": "storybook build",