@g4rcez/components 4.0.2 → 4.1.2

package/dist/types.d.ts

@@ -11,7 +11,7 @@ export type Any = Record<string, any>;
 export type Never = Record<string, never>;
 export type Nil<T> = T | null | undefined;
 export interface ReactComponent<P = Any> {
-    propTypes?: any;
+    propTypes?: unknown;
     displayName?: string | undefined;
     (props: P): ReactNode | Promise<ReactNode>;
 }
@@ -20,7 +20,7 @@ export type CvaVariants<T extends object> = {
 };
 type Irreducible = string | number | null | undefined | Date | symbol;
 export type Walk<T> = T extends object ? {
-    [K in keyof T]: T[K] extends any[] ? K : K extends Irreducible ? T[K] extends object ? K | T[K] extends Date ? K : `${K & string}.${Walk<T[K]> & string}` : K : never;
+    [K in keyof T]: T[K] extends readonly unknown[] ? K : K extends Irreducible ? T[K] extends object ? K | T[K] extends Date ? K : `${K & string}.${Walk<T[K]> & string}` : K : never;
 }[keyof T] : never;
 export {};
 //# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAExE,MAAM,MAAM,KAAK,GAAG,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,YAAY,GAAG,GAAG,CAAC,OAAO,CAAC;AAEvE,MAAM,MAAM,KAAK,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAE,GAAG,EAAE,CAAC;AAErD,MAAM,MAAM,QAAQ,CAAC,MAAM,EAAE,GAAG,IAAI,IAAI,CAAC,MAAM,EAAE,MAAM,GAAG,CAAC,GAAG,GAAG,CAAC;AAElE,MAAM,MAAM,QAAQ,CAAC,CAAC,IAAI,QAAQ,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;AAEtD,MAAM,MAAM,IAAI,GAAG,MAAM,CAAC;AAE1B,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CAAC;AAE9C,MAAM,MAAM,GAAG,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAEtC,MAAM,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;AAE1C,MAAM,MAAM,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;AAE1C,MAAM,WAAW,cAAc,CAAC,CAAC,GAAG,GAAG;IACnC,SAAS,CAAC,EAAE,GAAG,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAEjC,CAAC,KAAK,EAAE,CAAC,GAAG,SAAS,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC;CAC9C;AAED,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,MAAM,IAAI;KACvC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC;CAC9B,CAAC;AAEF,KAAK,WAAW,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,GAAG,MAAM,CAAC;AAEtE,MAAM,MAAM,IAAI,CAAC,CAAC,IAAI,CAAC,SAAS,MAAM,GAChC;KACK,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,GAAG,EAAE,GAC5B,CAAC,GACD,CAAC,SAAS,WAAW,GACnB,CAAC,CAAC,CAAC,CAAC,SAAS,MAAM,GACf,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,IAAI,GACjB,CAAC,GACD,GAAG,CAAC,GAAG,MAAM,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,EAAE,GAC1C,CAAC,GACL,KAAK;CAChB,CAAC,MAAM,CAAC,CAAC,GACV,KAAK,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAExE,MAAM,MAAM,KAAK,GAAG,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,YAAY,GAAG,GAAG,CAAC,OAAO,CAAC;AAEvE,MAAM,MAAM,KAAK,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAE,GAAG,EAAE,CAAC;AAErD,MAAM,MAAM,QAAQ,CAAC,MAAM,EAAE,GAAG,IAAI,IAAI,CAAC,MAAM,EAAE,MAAM,GAAG,CAAC,GAAG,GAAG,CAAC;AAElE,MAAM,MAAM,QAAQ,CAAC,CAAC,IAAI,QAAQ,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;AAEtD,MAAM,MAAM,IAAI,GAAG,MAAM,CAAC;AAE1B,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CAAC;AAE9C,MAAM,MAAM,GAAG,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAEtC,MAAM,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;AAE1C,MAAM,MAAM,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;AAE1C,MAAM,WAAW,cAAc,CAAC,CAAC,GAAG,GAAG;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAEjC,CAAC,KAAK,EAAE,CAAC,GAAG,SAAS,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC;CAC9C;AAED,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,MAAM,IAAI;KACvC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC;CAC9B,CAAC;AAEF,KAAK,WAAW,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,GAAG,MAAM,CAAC;AAEtE,MAAM,MAAM,IAAI,CAAC,CAAC,IAAI,CAAC,SAAS,MAAM,GAChC;KACK,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,SAAS,OAAO,EAAE,GACzC,CAAC,GACD,CAAC,SAAS,WAAW,GACnB,CAAC,CAAC,CAAC,CAAC,SAAS,MAAM,GACf,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,IAAI,GACjB,CAAC,GACD,GAAG,CAAC,GAAG,MAAM,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,EAAE,GAC1C,CAAC,GACL,KAAK;CAChB,CAAC,MAAM,CAAC,CAAC,GACV,KAAK,CAAC"}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/{context-BFXNJVn2.js → use-translations-DSltA7H_.js}

@@ -1,6 +1,6 @@
-import { Fragment as g, createContext as h } from "react";
-import { jsxs as C } from "react/jsx-runtime";
-const y = {
+import { Fragment as h, createContext as C, useContext as y } from "react";
+import { jsxs as T } from "react/jsx-runtime";
+const $ = {
   hex: (e) => e,
   raw: (e) => e,
   hsl: (e) => `hsl(${e})`,
@@ -17,7 +17,7 @@ const y = {
     return l.concat(t(n, u, s));
   }
   return l.concat(i(n, t, a, s));
-}, []), $ = (e, t, a = "", r = "") => Object.entries(e).reduce((l, [o, n]) => {
+}, []), F = (e, t, a = "", r = "") => Object.entries(e).reduce((l, [o, n]) => {
   const s = r === "" ? `${a}${o}` : `${r}-${o}`;
   if (typeof n == "string") {
     const u = r === "" ? `${a}${o}` : o;
@@ -25,7 +25,7 @@ const y = {
   }
   return {
     ...l,
-    [o]: $(n, t, a, s)
+    [o]: F(n, t, a, s)
   };
 }, {}), p = {
   default: (e) => `:root { ${e} }`,
@@ -33,22 +33,22 @@ const y = {
 }, c = (e, t) => {
   const a = t.value || ((l, o) => o), r = e.map((l) => `${l.key}: ${a(l.key, l.value)}`).join(";");
   return t.result(r);
-}, S = {
+}, w = {
   default: (e) => c(e, { result: p.default }),
   dark: (e) => c(e, { result: p.dark })
 }, d = (e) => (t, a, r) => {
   const l = { key: `--${r}`, value: `${t}` };
   return e ? e(l) : l;
-}, T = (e) => ({ key: e.key.replace(/^--/, "--z-"), value: e.value }), b = (e, t) => {
-  const a = i(e.colors, d(t?.colors)), r = i(e.spacing, d(t?.spacing)), l = i(e.rounded, d(t?.rounded)), o = i(e.shadow, d(t?.rounded)), n = i(e.zIndex, d(t?.zIndex ?? T)), s = e.custom ? i(e.custom, d(t?.customTokens)) : [];
+}, m = (e) => ({ key: e.key.replace(/^--/, "--z-"), value: e.value }), b = (e, t) => {
+  const a = i(e.colors, d(t?.colors)), r = i(e.spacing, d(t?.spacing)), l = i(e.rounded, d(t?.rounded)), o = i(e.shadow, d(t?.rounded)), n = i(e.zIndex, d(t?.zIndex ?? m)), s = e.custom ? i(e.custom, d(t?.customTokens)) : [];
   return a.concat(r, l, s, n, o);
-}, w = (e, t) => c(b(e), {
+}, P = (e, t) => c(b(e), {
   result: (a) => `html${t ? `.${t}` : ""} {${a}}`,
   value: (a, r) => r.replace("hsla(", "").replace(")", "")
-}), f = (e, t) => b(e, t).reduce((r, l) => ({ ...r, [l.key]: l.value }), {}), P = (e, t) => c(b(e, t), {
+}), L = (e, t) => b(e, t).reduce((r, l) => ({ ...r, [l.key]: l.value }), {}), D = (e, t) => c(b(e, t), {
   result: (a) => `html${t?.name ? `.${t.name}` : ""} {${a}}`,
   value: (a, r) => r
-}), F = {
+}), g = {
   autocompleteEmpty: "Nothing here...",
   calendarBackMonth: "Back month",
   calendarFromDate: "From",
@@ -108,7 +108,7 @@ const y = {
   tableFilterValueTitle: "Value",
   tableGroupLabel: "Group",
   tableGroupLabelWithCount: "Group",
-  tablePaginationFooter: (e) => /* @__PURE__ */ C(g, { children: [
+  tablePaginationFooter: (e) => /* @__PURE__ */ T(h, { children: [
     e.current,
     " to ",
     e.pages,
@@ -135,27 +135,35 @@ const y = {
   uploadIdleButton: "Choose your files",
   uploadDragging: (e) => `Dragging ${e.n} ${e.n > 0 ? "files" : "file"}`,
   uploadDialogTitle: "Details of your file",
-  datepickerPlaceholder: (e) => "day/month/year"
-}, m = {
+  datepickerPlaceholder: (e) => "day/month/year",
+  spinnerLoading: "Loading",
+  skeletonLoading: "Loading content",
+  closeButton: "Close",
+  fileUploadZoneLabel: "File upload area. Drag files here or press Enter to browse."
+}, v = {
   input: { iconFeedback: !0 },
   table: { operations: !0, sorters: !0, filters: !0, sticky: void 0 }
-}, D = h({
-  parser: y.hsla,
-  tweaks: m,
+}, k = C({
+  parser: $.hsla,
+  tweaks: v,
   floatingRef: void 0,
-  map: F,
+  map: g,
   locale: void 0
-});
+}), N = () => {
+  const e = y(k);
+  return e ? e.map : g;
+};
 export {
-  D as C,
-  m as a,
-  S as b,
-  $ as c,
-  F as d,
-  w as e,
-  f,
-  P as g,
-  y as p,
-  i as r
+  k as C,
+  v as a,
+  w as b,
+  F as c,
+  g as d,
+  P as e,
+  L as f,
+  D as g,
+  $ as p,
+  i as r,
+  N as u
 };
-//# sourceMappingURL=context-BFXNJVn2.js.map
+//# sourceMappingURL=use-translations-DSltA7H_.js.map

package/dist/use-translations-DSltA7H_.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-translations-DSltA7H_.js","sources":["../src/styles/design-tokens.ts","../src/config/default-translations.tsx","../src/config/default-tweaks.ts","../src/config/context.ts","../src/hooks/use-translations.ts"],"sourcesContent":["import { CSSProperties } from \"react\";\nimport { DesignTokens, DesignTokensBuilder, DesignTokensParser, GeneralTokens, Token } from \"./theme.types\";\n\nexport const parsers = {\n    hex: (v: string) => v,\n    raw: (v: string) => v,\n    hsl: (v: string) => `hsl(${v})` as const,\n    rgb: (v: string) => `rgb(${v})` as const,\n    z: (_, __, k) => `var(--z-${k})` as const,\n    hsla: (v: string) => `hsla(${v})` as const,\n    rgba: (v: string) => `rgba(${v})` as const,\n    cssVariable: (_, __, k) => `var(--${k})` as const,\n    formatWithVar: (format: string) => (_: string, __: string, v: string) => `${format}(var(--${v}), <alpha-value>)` as const,\n} satisfies Record<string, DesignTokensParser>;\n\nexport const reduceTokens = <T extends GeneralTokens>(colors: T, parse: DesignTokensBuilder, prefix: string = \"\", append: string = \"\"): Token[] =>\n    Object.entries(colors).reduce<Token[]>((acc, [key, value]) => {\n        const combine = append === \"\" ? `${prefix}${key}` : `${append}-${key}`;\n        if (typeof value === \"string\") {\n            const k = append === \"\" ? `${prefix}${key}` : key;\n            return acc.concat(parse(value, k, combine));\n        }\n        return acc.concat(reduceTokens(value, parse, prefix, combine));\n    }, []);\n\nexport const createDesignTokens = <T extends GeneralTokens, Fn extends DesignTokensParser>(\n    colors: T,\n    parse: Fn,\n    prefix: string = \"\",\n    append: string = \"\"\n): T =>\n    Object.entries(colors).reduce<T>((acc, [key, value]) => {\n        const combine = append === \"\" ? `${prefix}${key}` : `${append}-${key}`;\n        if (typeof value === \"string\") {\n            const k = append === \"\" ? `${prefix}${key}` : key;\n            return { ...acc, [k]: parse(value, key, combine) };\n        }\n        return {\n            ...acc,\n            [key]: createDesignTokens(value, parse, prefix, combine),\n        };\n    }, {} as T);\n\nconst modifiers = {\n    default: (variables: string) => `:root { ${variables} }`,\n    dark: (variables: string) => `html.dark {${variables}}`,\n};\n\nconst createStyleContent = (\n    tokens: Token[],\n    modifiers: {\n        result: (str: string) => string;\n        value?: (k: string, v: string) => string;\n    }\n) => {\n    const v = modifiers.value || ((_: string, s: string) => s);\n    const content = tokens.map((token) => `${token.key}: ${v(token.key, token.value)}`).join(\";\");\n    return modifiers.result(content);\n};\n\nexport const createStyles = {\n    default: (tokens: Token[]) => createStyleContent(tokens, { result: modifiers.default }),\n    dark: (tokens: Token[]) => createStyleContent(tokens, { result: modifiers.dark }),\n};\n\ntype TokenParsersType = \"colors\" | \"spacing\" | \"rounded\" | \"customTokens\" | \"zIndex\";\n\ntype TokenCustomParser = (t: Token) => Token;\n\nexport type TokenRemap = Partial<Record<TokenParsersType, TokenCustomParser> & { name: string }>;\n\nconst fn =\n    (p?: TokenCustomParser): DesignTokensBuilder =>\n    (value, _, key) => {\n        const r = { key: `--${key}`, value: `${value}` };\n        return p ? p(r) : r;\n    };\n\nconst zIndexParser = (t: Token): Token => ({ key: t.key.replace(/^--/, \"--z-\"), value: t.value });\n\nconst createTokens = (theme: DesignTokens, map?: TokenRemap) => {\n    const colors = reduceTokens(theme.colors, fn(map?.colors));\n    const spacing = reduceTokens(theme.spacing, fn(map?.spacing));\n    const rounded = reduceTokens(theme.rounded, fn(map?.rounded));\n    const shadow = reduceTokens(theme.shadow, fn(map?.rounded));\n    const zIndex = reduceTokens(theme.zIndex, fn(map?.zIndex ?? zIndexParser));\n    const customTokens = theme.custom ? reduceTokens(theme.custom, fn(map?.customTokens)) : [];\n    return colors.concat(spacing, rounded, customTokens, zIndex, shadow);\n};\n\nexport const createTheme = (theme: DesignTokens, name?: string) =>\n    createStyleContent(createTokens(theme), {\n        result: (variables: string) => `html${name ? `.${name}` : \"\"} {${variables}}`,\n        value: (_, v) => v.replace(\"hsla(\", \"\").replace(\")\", \"\"),\n    });\n\nexport const createCssProperties = (theme: DesignTokens, map?: TokenRemap): CSSProperties => {\n    const tokens = createTokens(theme, map);\n    return tokens.reduce<CSSProperties>((acc, el) => ({ ...acc, [el.key]: el.value }), {});\n};\n\nexport const createTokenStyles = (theme: DesignTokens, map?: TokenRemap) =>\n    createStyleContent(createTokens(theme, map), {\n        result: (variables: string) => `html${map?.name ? `.${map.name}` : \"\"} {${variables}}`,\n        value: (_, v) => v,\n    });\n","import React, { Fragment } from \"react\";\n\nexport const defaultTranslations = {\n    autocompleteEmpty: \"Nothing here...\",\n    calendarBackMonth: \"Back month\",\n    calendarFromDate: \"From\",\n    calendarMonthLabel: \"Month\",\n    calendarNextMonth: \"Next month\",\n    calendarDatetimeTitle: \"Time\",\n    calendarToDate: \"To\",\n    calendarToday: \"Today\",\n    pageCalendarMonthView: \"Month view\",\n    pageCalendarWeekView: \"Week view\",\n    pageCalendarDayView: \"Day view\",\n    pageCalendarPrevious: \"Previous\",\n    pageCalendarNext: \"Next\",\n    pageCalendarToday: \"Today\",\n    pageCalendarAddEvent: \"Add event\",\n    pageCalendarWeekLabel: (n: number) => `Week ${n}`,\n    pageCalendarFilter: \"Filter:\",\n    pageCalendarMoreEvents: (n: number) => `+${n} more...`,\n    pageCalendarLabel: \"Calendar\",\n    pageCalendarNavigation: \"Calendar navigation\",\n    pageCalendarMonthGrid: \"Calendar month\",\n    pageCalendarFilterEnabled: \"enabled\",\n    pageCalendarFilterDisabled: \"disabled\",\n    pageCalendarEventCount: (n: number) => (n === 1 ? \"1 event\" : `${n} events`),\n    pageCalendarEventAt: (title: string, time: string) => `${title} at ${time}`,\n    commandPaletteEmpty: \"Nothing here...\",\n    commandPaletteLoading: \"Loading...\",\n    datePickerCalendarButtonLabel: \"Click to open a date picker\",\n    emptyDataMessage: \"No data\",\n    inputCaretDown: \"Click to see all options\",\n    inputCloseValue: \"Click to clear the value\",\n    inputOptionalLabel: \"Optional\",\n    wizardNext: \"Next\",\n    wizardPrev: \"Previous\",\n    wizardFinish: \"Finish\",\n    wizardSkip: \"Skip\",\n    multiSelectInnerPlaceholder: \"Search...\",\n    multiSelectSelectedLabel: \"Selected\",\n    tableColumnResizer: \"Resize column\",\n    tableFilterColumnPlaceholder: \"Filter by\",\n    tableFilterColumnTitle: \"Filter by\",\n    tableFilterDropdownTitle: \"Filters\",\n    tableFilterDropdownTitleUnique: \"Filter by\",\n    tableFilterLabel: \"Filters\",\n    tableFilterNewFilter: \"New filter\",\n    tableFilterOperatorPlaceholder: \"Equals to...\",\n    tableFilterOperatorTitle: \"Operation\",\n    tableFilterTypeContains: \"Contains\",\n    tableFilterTypeEndsWith: \"Ends with\",\n    tableFilterTypeGreaterThan: \"Greater than\",\n    tableFilterTypeIs: \"Is\",\n    tableFilterTypeIsNot: \"Is not\",\n    tableFilterTypeLessThan: \"Less than\",\n    tableFilterTypeNotContains: \"Not contains\",\n    tableFilterTypeStartsWith: \"Starts with\",\n    tableFilterValuePlaceholder: \"Something...\",\n    tableFilterValueTitle: \"Value\",\n    tableGroupLabel: \"Group\",\n    tableGroupLabelWithCount: \"Group\",\n    tablePaginationFooter: (pagination: { pages: number; totalItems: number; sizes?: number[]; current: number; select: React.ReactNode }) => (\n        <Fragment>\n            {pagination.current} to {pagination.pages} of {pagination.totalItems} items.{Array.isArray(pagination.sizes) ? pagination.select : null}{\" \"}\n            per page.\n        </Fragment>\n    ),\n    tablePaginationNext: \"Next\",\n    tablePaginationPrevious: \"Previous\",\n    tablePaginationSelectLabel: \"Select the size of page\",\n    tableSortAddButton: \"Add sort\",\n    tableSortAsc: \"Ascending\",\n    tableSortDesc: \"Descending\",\n    tableSortDropdownTitle: \"Order by\",\n    tableSortOrderByLabel: \"Order by\",\n    tableSortOrderInputPlaceholder: \"Order by\",\n    tableSortOrderInputTitle: \"Order by\",\n    tableSortTypeInputPlaceholder: \"Ascending\",\n    tableSortTypeInputTitle: \"Sort type\",\n\n    uploadIdle: \"You can drag your files here\",\n    uploadIdleButton: \"Choose your files\",\n    uploadDragging: (props: { n: number }) => `Dragging ${props.n} ${props.n > 0 ? \"files\" : \"file\"}`,\n    uploadDialogTitle: \"Details of your file\",\n\n    datepickerPlaceholder: (_: string) => \"day/month/year\",\n    spinnerLoading: \"Loading\",\n    skeletonLoading: \"Loading content\",\n    closeButton: \"Close\",\n    fileUploadZoneLabel: \"File upload area. Drag files here or press Enter to browse.\",\n};\n\nexport type Translations = typeof defaultTranslations;\n","export type Tweaks = {\n    table: {\n        sorters: boolean;\n        filters: boolean;\n        operations: boolean;\n        sticky: number | undefined;\n    };\n    input: {\n        iconFeedback: boolean;\n    };\n};\n\nexport const defaultTweaks: Tweaks = {\n    input: { iconFeedback: true },\n    table: { operations: true, sorters: true, filters: true, sticky: undefined },\n};\n","\"use client\";\nimport { createContext } from \"react\";\nimport type { IconProps } from \"@phosphor-icons/react\";\nimport type { Locales } from \"the-mask-input\";\nimport type { ContextType } from \"../hooks/use-components-provider\";\nimport { parsers } from \"../styles/design-tokens\";\nimport { defaultTranslations, type Translations } from \"./default-translations\";\nimport { defaultTweaks, type Tweaks } from \"./default-tweaks\";\n\nexport type ContextProps = Partial<{\n    tweaks: Partial<Tweaks>;\n    map: Partial<Translations>;\n    locale: Locales | undefined;\n    parser: typeof parsers.hsla;\n    rootFloating?: HTMLElement | null;\n    iconWeight: IconProps[\"weight\"];\n}>;\n\nexport const Context = createContext<ContextType>({\n    parser: parsers.hsla,\n    tweaks: defaultTweaks,\n    floatingRef: undefined,\n    map: defaultTranslations,\n    locale: undefined as Locales | undefined,\n});\n","import { useContext } from \"react\";\nimport { Context } from \"../config/context\";\nimport { defaultTranslations } from \"../config/default-translations\";\n\nexport const useTranslations = () => {\n    const ctx = useContext(Context);\n    if (!ctx) return defaultTranslations;\n    return ctx.map!;\n};\n"],"names":["parsers","v","_","__","k","format","reduceTokens","colors","parse","prefix","append","acc","key","value","combine","createDesignTokens","modifiers","variables","createStyleContent","tokens","s","content","token","createStyles","fn","p","r","zIndexParser","t","createTokens","theme","map","spacing","rounded","shadow","zIndex","customTokens","createTheme","name","createCssProperties","el","createTokenStyles","defaultTranslations","n","title","time","pagination","jsxs","Fragment","props","defaultTweaks","Context","createContext","useTranslations","ctx","useContext"],"mappings":"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"}

package/package.json

@@ -1,99 +1,42 @@
 {
     "name": "@g4rcez/components",
-    "description": "Customizable react components.",
-    "version": "4.0.2",
-    "sideEffects": false,
+    "version": "4.1.2",
     "private": false,
-    "packageManager": "pnpm@10.12.3",
-    "license": "MIT",
-    "engines": {
-        "node": ">=20.14.0"
+    "description": "Customizable react components.",
+    "keywords": [
+        "agent-skill",
+        "ai-agents",
+        "claude-skill",
+        "components",
+        "design-system",
+        "react",
+        "skill",
+        "tailwindcss"
+    ],
+    "homepage": "https://github.com/g4rcez/components#readme",
+    "bugs": {
+        "url": "https://github.com/g4rcez/components/issues"
     },
+    "license": "MIT",
     "author": {
-        "email": "allan.f.garcez@gmail.com",
         "name": "Allan Garcez",
+        "email": "allan.f.garcez@gmail.com",
         "url": "https://garcez.dev"
     },
-    "bugs": {
-        "url": "https://github.com/g4rcez/components/issues"
-    },
     "repository": {
-        "url": "https://github.com/g4rcez/components",
-        "type": "git"
-    },
-    "scripts": {
-        "watch": "vite build --watch --minify false",
-        "prepublishOnly": "npm run build",
-        "build": "cp ../../skills/g4rcez-components/SKILL.md ./ai/SKILL.md; rm -rf ./dist; vite build; npm run lib:types; npm run preset; npm run lib:css",
-        "format": "npx prettier --write .",
-        "lib:css": "BUILD_LIB=true tailwind -i ./src/index.css -o ./dist/index.css --minify",
-        "lib:tailwind": "tsc -p tsconfig.tailwind.json",
-        "lib:types": "tsc -p tsconfig.lib.json",
-        "preset": "tsc -p tsconfig.styles.json && tsc -p tsconfig.tailwind.json",
-        "test": "vitest run",
-        "test:watch": "vitest watch"
-    },
-    "peerDependencies": {
-        "react": ">=18",
-        "react-dom": ">=18"
-    },
-    "dependencies": {
-        "@base-ui/react": "1.2.0",
-        "@floating-ui/react": "0.27.18",
-        "@phosphor-icons/react": "2.1.10",
-        "class-variance-authority": "0.7.1",
-        "clsx": "2.1.1",
-        "date-fns": "4.1.0",
-        "linq-arrays": "3.2.5",
-        "motion": "12.34.3",
-        "pretty-bytes": "7.1.0",
-        "qs": "6.15.0",
-        "react-dropzone": "15.0.0",
-        "react-use-measure": "2.1.7",
-        "react-virtuoso": "4.18.1",
-        "sidekicker": "0.1.10",
-        "storage-manager-js": "4.2.6-5",
-        "tailwind-merge": "3.4.0",
-        "the-mask-input": "3.3.13",
-        "use-typed-reducer": "4.3.0",
-        "zod": "3.25.67"
-    },
-    "devDependencies": {
-        "@eslint/js": "9.39.2",
-        "@tailwindcss/forms": "0.5.11",
-        "@testing-library/jest-dom": "^6.9.1",
-        "@testing-library/react": "^16.3.2",
-        "@types/node": "25.3.1",
-        "@types/qs": "6.14.0",
-        "@types/react": "19.2.14",
-        "@types/react-dom": "19.2.3",
-        "@vitejs/plugin-react": "5.1.4",
-        "eslint": "10.0.2",
-        "eslint-config-react-app": "7.0.1",
-        "eslint-plugin-jsx-a11y": "6.10.2",
-        "eslint-plugin-react-hooks": "7.0.1",
-        "eslint-plugin-react-refresh": "0.4.20",
-        "globals": "17.3.0",
-        "jsdom": "^28.1.0",
-        "postcss": "8.5.6",
-        "prettier": "3.8.1",
-        "tailwindcss": "3.4.14",
-        "tslib": "2.8.1",
-        "typescript": "5.9.3",
-        "typescript-eslint": "8.35.0",
-        "vite": "7.3.1",
-        "vite-tsconfig-paths": "6.1.1",
-        "vitest": "4.0.18"
+        "type": "git",
+        "url": "https://github.com/g4rcez/components"
     },
     "source": "./src/index.ts",
-    "types": "./dist/index.d.ts",
-    "main": "./dist/index.js",
-    "module": "./dist/index.js",
     "files": [
         "dist",
         "dist/index.css",
         "ai"
     ],
+    "sideEffects": false,
+    "main": "./dist/index.js",
+    "module": "./dist/index.js",
+    "types": "./dist/index.d.ts",
     "exports": {
         ".": {
             "types": {
@@ -152,12 +95,6 @@
             "require": "./dist/components/form/form.js",
             "default": "./dist/components/form/form.js"
         },
-        "./transfer-list": {
-            "type": "./dist/components/form/transfer-list.d.ts",
-            "import": "./dist/components/form/transfer-list.js",
-            "require": "./dist/components/form/transfer-list.js",
-            "default": "./dist/components/form/transfer-list.js"
-        },
         "./radiobox": {
             "type": "./dist/components/form/radiobox.d.ts",
             "import": "./dist/components/form/radiobox.js",
@@ -297,5 +234,81 @@
             "default": "./dist/components/display/alert.js"
         },
         "./ai/*": "./ai/*"
+    },
+    "scripts": {
+        "watch": "vite build --watch --minify false",
+        "prepublishOnly": "npm run build",
+        "build": "rm -rf ./dist; vite build; npm run lib:types; npm run preset; npm run lib:css",
+        "format": "oxfmt --write .",
+        "lint": "oxlint .",
+        "lib:css": "BUILD_LIB=true tailwind -i ./src/index.css -o ./dist/index.css --minify",
+        "lib:tailwind": "tsc -p tsconfig.tailwind.json",
+        "lib:types": "tsc -p tsconfig.lib.json",
+        "preset": "tsc -p tsconfig.styles.json && tsc -p tsconfig.tailwind.json",
+        "test": "vitest run",
+        "test:watch": "vitest watch"
+    },
+    "dependencies": {
+        "@base-ui/react": "1.2.0",
+        "@floating-ui/react": "0.27.18",
+        "@phosphor-icons/react": "2.1.10",
+        "class-variance-authority": "0.7.1",
+        "clsx": "2.1.1",
+        "date-fns": "4.1.0",
+        "linq-arrays": "3.2.5",
+        "motion": "12.34.3",
+        "pretty-bytes": "7.1.0",
+        "qs": "6.15.0",
+        "react-dropzone": "15.0.0",
+        "react-use-measure": "2.1.7",
+        "react-virtuoso": "4.18.1",
+        "sidekicker": "0.1.10",
+        "storage-manager-js": "4.2.6-5",
+        "tailwind-merge": "3.4.0",
+        "the-mask-input": "3.3.13",
+        "use-typed-reducer": "4.3.0",
+        "zod": "3.25.67"
+    },
+    "devDependencies": {
+        "@tailwindcss/forms": "0.5.11",
+        "@testing-library/jest-dom": "^6.9.1",
+        "@testing-library/react": "^16.3.2",
+        "@types/node": "25.3.1",
+        "@types/qs": "6.14.0",
+        "@types/react": "19.2.14",
+        "@types/react-dom": "19.2.3",
+        "@vitejs/plugin-react": "5.1.4",
+        "jsdom": "^28.1.0",
+        "postcss": "8.5.6",
+        "tailwindcss": "3.4.14",
+        "tslib": "2.8.1",
+        "typescript": "5.9.3",
+        "vite": "7.3.1",
+        "vite-tsconfig-paths": "6.1.1",
+        "vitest": "4.0.18"
+    },
+    "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+    },
+    "engines": {
+        "node": ">=20.14.0"
+    },
+    "packageManager": "pnpm@10.12.3",
+    "agents": {
+        "skills": [
+            {
+                "name": "g4rcez-components",
+                "path": "./ai/SKILL.md",
+                "docs": "./ai/docs/index.md",
+                "version": "1"
+            }
+        ]
+    },
+    "skill": {
+        "name": "g4rcez-components",
+        "path": "./ai/SKILL.md",
+        "docs": "./ai/docs/index.md",
+        "version": "1"
     }
 }

package/ai/docs/TransferList.md

@@ -1,142 +0,0 @@
----
-title: TransferList
-description: Two-panel component for moving items between a source list and a target list.
-package: "@g4rcez/components"
-export: "{ TransferList }"
-import: "import { TransferList } from '@g4rcez/components/transfer-list'"
-category: form
----
-
-# TransferList
-
-Two-panel component for moving items between a source list and a target list.
-
-## Import
-
-```tsx
-import { TransferList } from "@g4rcez/components/transfer-list";
-```
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `source` | `T[]` | — | Items in the left (available) list. |
-| `target` | `T[]` | — | Items in the right (selected) list. |
-| `Item` | `React.FC<{ data: T }>` | — | Component used to render each list row. |
-| `reference` | `keyof T` | — | Unique key used to identify and compare items (e.g., `"id"`). |
-| `setSource` | `Dispatch<SetStateAction<T[]>>` | — | State setter for the source list. |
-| `setTarget` | `Dispatch<SetStateAction<T[]>>` | — | State setter for the target list. |
-
-## Design Tokens
-
-Tokens this component reads. Customize by overriding these CSS variables in your theme.
-
-| Token | CSS Variable | Purpose |
-|-------|-------------|---------|
-| `border-card-border` | `--card-border` | Border around each list panel |
-| `bg-background` | `--background` | Panel background (inherited) |
-| `text-foreground` | `--foreground` | Item text color (inherited) |
-| `border-border` | `--border` | Section divider inside the panel header |
-
-## Examples
-
-### Basic transfer list
-
-```tsx
-import { useState } from "react";
-import { TransferList } from "@g4rcez/components/transfer-list";
-
-type Role = { id: string; name: string };
-
-const allRoles: Role[] = [
-  { id: "admin", name: "Administrator" },
-  { id: "editor", name: "Editor" },
-  { id: "viewer", name: "Viewer" },
-  { id: "auditor", name: "Auditor" },
-];
-
-const RoleItem: React.FC<{ data: Role }> = ({ data }) => (
-  <span className="text-sm text-foreground">{data.name}</span>
-);
-
-export default function RoleAssignment() {
-  const [available, setAvailable] = useState(allRoles);
-  const [assigned, setAssigned] = useState<Role[]>([]);
-
-  return (
-    <TransferList
-      source={available}
-      target={assigned}
-      setSource={setAvailable}
-      setTarget={setAssigned}
-      reference="id"
-      Item={RoleItem}
-    />
-  );
-}
-```
-
-### With custom item rendering
-
-```tsx
-import { ShieldIcon } from "@phosphor-icons/react";
-import { TransferList } from "@g4rcez/components/transfer-list";
-
-type Permission = { id: string; label: string; scope: string };
-
-const PermissionItem: React.FC<{ data: Permission }> = ({ data }) => (
-  <span className="flex items-center gap-base">
-    <ShieldIcon size={14} className="text-primary" />
-    <span className="text-sm text-foreground">{data.label}</span>
-    <span className="ml-auto text-xs text-muted-foreground">{data.scope}</span>
-  </span>
-);
-
-export default function PermissionManager() {
-  const [source, setSource] = useState(allPermissions);
-  const [target, setTarget] = useState<Permission[]>([]);
-
-  return (
-    <TransferList
-      source={source}
-      target={target}
-      setSource={setSource}
-      setTarget={setTarget}
-      reference="id"
-      Item={PermissionItem}
-    />
-  );
-}
-```
-
-## Do
-
-- Provide a unique, stable `reference` key for each item (typically the primary key from your data model).
-- Use `TransferList` when users need to pick a significant number of items from a large pool.
-- Keep the `Item` component focused on displaying — handle mutations via `setSource` / `setTarget`.
-- Use design-token classes inside `Item` for text and icon colors (`text-foreground`, `text-primary`, `text-muted-foreground`).
-
-## Don't
-
-- Don't use `TransferList` for very small lists (3–5 items) where `MultiSelect` or a `Checkbox` group would be faster.
-- Don't perform expensive side effects inside the `Item` component — keep it purely presentational.
-- Don't pass raw Tailwind color classes (`bg-blue-500`, `text-white`, `border-gray-300`) — use design tokens instead.
-- Don't use arbitrary Tailwind values (`bg-[#abc]`) — override CSS variables in your `@theme` block instead.
-
-## Accessibility
-
-- Each item is rendered with a `Checkbox` for selection, giving it full keyboard and screen-reader support.
-- Lists are virtualized using `react-virtuoso` for performance with large datasets.
-- Transfer buttons use `CaretRightIcon` from `@phosphor-icons/react` and should have descriptive `aria-label` attributes when used.
-
-## Data Attributes
-
-The `TransferList` component does not set component-specific `data-*` attributes directly. Individual list items inherit `data-component` and accessibility attributes from the embedded `Checkbox` components.
-
-## Notes
-
-- Uses `react-virtuoso` with a `useWindowScroll` strategy — the list height adapts to the parent container via `useParentHeight`.
-- The source panel includes a built-in `Input` search field for quick filtering.
-- The component is a generic `<T extends POJO>` — TypeScript will infer `T` from `source` and `target` props.
-- Only the source-to-target transfer button (`ChevronRightIcon`) is currently wired in the implementation; bidirectional transfer requires wiring additional buttons if needed.