@lucasbernardosn/react-ui 0.1.0 → 0.3.0

package/dist/components/display/data-list/data-list-item.js

@@ -8,13 +8,10 @@ import { mergeProps, useRender } from "@base-ui/react";
 */
 const DataListItem = (props) => {
 	const { render, className, ...rest } = props;
-	const { orientation, size } = useDataListContext();
+	const { orientation } = useDataListContext();
 	const baseProps = {
 		"data-component": "DataList.Item",
-		className: mergeTwClassNames(dataListItemVariants({
-			orientation,
-			size
-		}), className)
+		className: mergeTwClassNames(dataListItemVariants({ orientation }), className)
 	};
 	return useRender({
 		render,

package/dist/components/display/data-list/data-list-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-list-item.js","names":[],"sources":["../../../../src/components/display/data-list/data-list-item.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\nimport { dataListItemVariants } from './data-list-item-variants';\nimport { useDataListContext } from './use-data-list-context';\n\nexport type DataListItemProps = useRender.ComponentProps<'div'>;\n\n/**\n * Um par rótulo e valor. O `div` em volta de `dt` e `dd` é válido dentro de `dl`.\n */\nexport const DataListItem = (props: DataListItemProps) => {\n  const { render, className, ...rest } = props;\n\n  const { orientation, size } = useDataListContext();\n\n  const baseProps = {\n    'data-component': 'DataList.Item',\n    className: mergeTwClassNames(\n      dataListItemVariants({ orientation, size }),\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nDataListItem.displayName = 'DataList.Item';\n"],"mappings":";;;;;;;;AAUA,MAAa,gBAAgB,UAA6B;CACxD,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,EAAE,aAAa,SAAS,mBAAmB;CAEjD,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT,qBAAqB;GAAE;GAAa;EAAK,CAAC,GAC1C,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,aAAa,cAAc"}
+{"version":3,"file":"data-list-item.js","names":[],"sources":["../../../../src/components/display/data-list/data-list-item.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\nimport { dataListItemVariants } from './data-list-item-variants';\nimport { useDataListContext } from './use-data-list-context';\n\nexport type DataListItemProps = useRender.ComponentProps<'div'>;\n\n/**\n * Um par rótulo e valor. O `div` em volta de `dt` e `dd` é válido dentro de `dl`.\n */\nexport const DataListItem = (props: DataListItemProps) => {\n  const { render, className, ...rest } = props;\n\n  const { orientation } = useDataListContext();\n\n  const baseProps = {\n    'data-component': 'DataList.Item',\n    className: mergeTwClassNames(\n      dataListItemVariants({ orientation }),\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nDataListItem.displayName = 'DataList.Item';\n"],"mappings":";;;;;;;;AAUA,MAAa,gBAAgB,UAA6B;CACxD,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,EAAE,gBAAgB,mBAAmB;CAE3C,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT,qBAAqB,EAAE,YAAY,CAAC,GACpC,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,aAAa,cAAc"}

package/dist/components/display/data-list/data-list-root-variants.d.ts

@@ -2,7 +2,6 @@
 export declare const dataListRootVariants: (props?: ({
   divided?: boolean | null | undefined;
   orientation?: "vertical" | "horizontal" | null | undefined;
-  size?: "sm" | "md" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion
 //# sourceMappingURL=data-list-root-variants.d.ts.map

package/dist/components/display/data-list/data-list-root-variants.js

@@ -1,7 +1,7 @@
 import { dataListDefaultVariants } from "./use-data-list-context.js";
 import { cva } from "class-variance-authority";
 //#region src/components/display/data-list/data-list-root-variants.ts
-const dataListRootVariants = cva(["flex"], {
+const dataListRootVariants = cva(["flex", "text-sm"], {
 	variants: {
 		divided: {
 			true: [],
@@ -10,11 +10,6 @@ const dataListRootVariants = cva(["flex"], {
 		orientation: {
 			horizontal: ["flex-row"],
 			vertical: ["flex-col"]
-		},
-		size: {
-			sm: ["text-xs"],
-			md: ["text-sm"],
-			lg: ["text-base"]
 		}
 	},
 	compoundVariants: [{
@@ -28,8 +23,7 @@ const dataListRootVariants = cva(["flex"], {
 	}],
 	defaultVariants: {
 		divided: dataListDefaultVariants.divided,
-		orientation: dataListDefaultVariants.orientation,
-		size: dataListDefaultVariants.size
+		orientation: dataListDefaultVariants.orientation
 	}
 });
 //#endregion

package/dist/components/display/data-list/data-list-root-variants.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-list-root-variants.js","names":[],"sources":["../../../../src/components/display/data-list/data-list-root-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport { dataListDefaultVariants } from './use-data-list-context';\n\nexport const dataListRootVariants = cva(['flex'], {\n  variants: {\n    divided: {\n      true: [],\n      false: [],\n    },\n    orientation: {\n      horizontal: ['flex-row'],\n      vertical: ['flex-col'],\n    },\n    size: {\n      sm: ['text-xs'],\n      md: ['text-sm'],\n      lg: ['text-base'],\n    },\n  },\n  compoundVariants: [\n    {\n      divided: true,\n      orientation: 'horizontal',\n      className: ['divide-x', 'divide-gray-6'],\n    },\n    {\n      divided: true,\n      orientation: 'vertical',\n      className: ['divide-y', 'divide-gray-6'],\n    },\n  ],\n  defaultVariants: {\n    divided: dataListDefaultVariants.divided,\n    orientation: dataListDefaultVariants.orientation,\n    size: dataListDefaultVariants.size,\n  },\n});\n"],"mappings":";;;AAGA,MAAa,uBAAuB,IAAI,CAAC,MAAM,GAAG;CAChD,UAAU;EACR,SAAS;GACP,MAAM,CAAC;GACP,OAAO,CAAC;EACV;EACA,aAAa;GACX,YAAY,CAAC,UAAU;GACvB,UAAU,CAAC,UAAU;EACvB;EACA,MAAM;GACJ,IAAI,CAAC,SAAS;GACd,IAAI,CAAC,SAAS;GACd,IAAI,CAAC,WAAW;EAClB;CACF;CACA,kBAAkB,CAChB;EACE,SAAS;EACT,aAAa;EACb,WAAW,CAAC,YAAY,eAAe;CACzC,GACA;EACE,SAAS;EACT,aAAa;EACb,WAAW,CAAC,YAAY,eAAe;CACzC,CACF;CACA,iBAAiB;EACf,SAAS,wBAAwB;EACjC,aAAa,wBAAwB;EACrC,MAAM,wBAAwB;CAChC;AACF,CAAC"}
+{"version":3,"file":"data-list-root-variants.js","names":[],"sources":["../../../../src/components/display/data-list/data-list-root-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport { dataListDefaultVariants } from './use-data-list-context';\n\nexport const dataListRootVariants = cva(['flex', 'text-sm'], {\n  variants: {\n    divided: {\n      true: [],\n      false: [],\n    },\n    orientation: {\n      horizontal: ['flex-row'],\n      vertical: ['flex-col'],\n    },\n  },\n  compoundVariants: [\n    {\n      divided: true,\n      orientation: 'horizontal',\n      className: ['divide-x', 'divide-gray-6'],\n    },\n    {\n      divided: true,\n      orientation: 'vertical',\n      className: ['divide-y', 'divide-gray-6'],\n    },\n  ],\n  defaultVariants: {\n    divided: dataListDefaultVariants.divided,\n    orientation: dataListDefaultVariants.orientation,\n  },\n});\n"],"mappings":";;;AAGA,MAAa,uBAAuB,IAAI,CAAC,QAAQ,SAAS,GAAG;CAC3D,UAAU;EACR,SAAS;GACP,MAAM,CAAC;GACP,OAAO,CAAC;EACV;EACA,aAAa;GACX,YAAY,CAAC,UAAU;GACvB,UAAU,CAAC,UAAU;EACvB;CACF;CACA,kBAAkB,CAChB;EACE,SAAS;EACT,aAAa;EACb,WAAW,CAAC,YAAY,eAAe;CACzC,GACA;EACE,SAAS;EACT,aAAa;EACb,WAAW,CAAC,YAAY,eAAe;CACzC,CACF;CACA,iBAAiB;EACf,SAAS,wBAAwB;EACjC,aAAa,wBAAwB;CACvC;AACF,CAAC"}

package/dist/components/display/data-list/data-list-root.d.ts

@@ -1,5 +1,5 @@
 import { DataListVariants } from "./use-data-list-context.js";
-import { MergeOverride } from "@lucasbernardosn/utils";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
 import { useRender } from "@base-ui/react";
 //#region src/components/display/data-list/data-list-root.d.ts
 export type DataListRootProps = MergeOverride<useRender.ComponentProps<'dl'>, DataListVariants>;

package/dist/components/display/data-list/data-list-root.js

@@ -1,7 +1,7 @@
 import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
 import { DataListContextProvider } from "./use-data-list-context.js";
 import { dataListRootVariants } from "./data-list-root-variants.js";
-import { createSplitProps } from "@lucasbernardosn/utils";
+import { createSplitProps } from "@lucasbernardosn/ts-utils";
 import { mergeProps, useRender } from "@base-ui/react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/display/data-list/data-list-root.tsx
@@ -20,11 +20,7 @@ const splitVariantProps = createSplitProps();
 * ```
 */
 const DataListRoot = (props) => {
-	const [variantProps, elementProps] = splitVariantProps(props, [
-		"divided",
-		"orientation",
-		"size"
-	]);
+	const [variantProps, elementProps] = splitVariantProps(props, ["divided", "orientation"]);
 	const { render, className, ...rest } = elementProps;
 	const baseProps = {
 		"data-component": "DataList.Root",

package/dist/components/display/data-list/data-list-root.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-list-root.js","names":[],"sources":["../../../../src/components/display/data-list/data-list-root.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { createSplitProps, type MergeOverride } from '@lucasbernardosn/utils';\nimport { mergeTwClassNames } from '#utils';\nimport { dataListRootVariants } from './data-list-root-variants';\nimport {\n  DataListContextProvider,\n  type DataListVariants,\n} from './use-data-list-context';\n\nexport type DataListRootProps = MergeOverride<\n  useRender.ComponentProps<'dl'>,\n  DataListVariants\n>;\n\nconst splitVariantProps = createSplitProps<DataListVariants>();\n\n/**\n * Lista de pares rótulo e valor, renderizada como `dl`.\n *\n * @example\n * ```tsx\n * <DataList.Root>\n *   <DataList.Item>\n *     <DataList.ItemLabel>Status</DataList.ItemLabel>\n *     <DataList.ItemValue>Ativo</DataList.ItemValue>\n *   </DataList.Item>\n * </DataList.Root>\n * ```\n */\nexport const DataListRoot = (props: DataListRootProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, [\n    'divided',\n    'orientation',\n    'size',\n  ]);\n\n  const { render, className, ...rest } = elementProps;\n\n  const baseProps = {\n    'data-component': 'DataList.Root',\n    className: mergeTwClassNames(dataListRootVariants(variantProps), className),\n  };\n\n  return (\n    <DataListContextProvider value={variantProps}>\n      {useRender({\n        render,\n        defaultTagName: 'dl',\n        props: mergeProps(baseProps, rest),\n      })}\n    </DataListContextProvider>\n  );\n};\n\nDataListRoot.displayName = 'DataList.Root';\n"],"mappings":";;;;;;;AAcA,MAAM,oBAAoB,iBAAmC;;;;;;;;;;;;;;AAe7D,MAAa,gBAAgB,UAA6B;CACxD,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO;EAC5D;EACA;EACA;CACF,CAAC;CAED,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBAAkB,qBAAqB,YAAY,GAAG,SAAS;CAC5E;CAEA,OACE,oBAAC,yBAAD;EAAyB,OAAO;EAC7B,UAAA,UAAU;GACT;GACA,gBAAgB;GAChB,OAAO,WAAW,WAAW,IAAI;EACnC,CAAC;CACsB,CAAA;AAE7B;AAEA,aAAa,cAAc"}
+{"version":3,"file":"data-list-root.js","names":[],"sources":["../../../../src/components/display/data-list/data-list-root.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport {\n  createSplitProps,\n  type MergeOverride,\n} from '@lucasbernardosn/ts-utils';\nimport { mergeTwClassNames } from '#utils';\nimport { dataListRootVariants } from './data-list-root-variants';\nimport {\n  DataListContextProvider,\n  type DataListVariants,\n} from './use-data-list-context';\n\nexport type DataListRootProps = MergeOverride<\n  useRender.ComponentProps<'dl'>,\n  DataListVariants\n>;\n\nconst splitVariantProps = createSplitProps<DataListVariants>();\n\n/**\n * Lista de pares rótulo e valor, renderizada como `dl`.\n *\n * @example\n * ```tsx\n * <DataList.Root>\n *   <DataList.Item>\n *     <DataList.ItemLabel>Status</DataList.ItemLabel>\n *     <DataList.ItemValue>Ativo</DataList.ItemValue>\n *   </DataList.Item>\n * </DataList.Root>\n * ```\n */\nexport const DataListRoot = (props: DataListRootProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, [\n    'divided',\n    'orientation',\n  ]);\n\n  const { render, className, ...rest } = elementProps;\n\n  const baseProps = {\n    'data-component': 'DataList.Root',\n    className: mergeTwClassNames(dataListRootVariants(variantProps), className),\n  };\n\n  return (\n    <DataListContextProvider value={variantProps}>\n      {useRender({\n        render,\n        defaultTagName: 'dl',\n        props: mergeProps(baseProps, rest),\n      })}\n    </DataListContextProvider>\n  );\n};\n\nDataListRoot.displayName = 'DataList.Root';\n"],"mappings":";;;;;;;AAiBA,MAAM,oBAAoB,iBAAmC;;;;;;;;;;;;;;AAe7D,MAAa,gBAAgB,UAA6B;CACxD,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAC5D,WACA,aACF,CAAC;CAED,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBAAkB,qBAAqB,YAAY,GAAG,SAAS;CAC5E;CAEA,OACE,oBAAC,yBAAD;EAAyB,OAAO;EAC7B,UAAA,UAAU;GACT;GACA,gBAAgB;GAChB,OAAO,WAAW,WAAW,IAAI;EACnC,CAAC;CACsB,CAAA;AAE7B;AAEA,aAAa,cAAc"}

package/dist/components/display/data-list/use-data-list-context.d.ts

@@ -16,12 +16,6 @@ export type DataListVariants = {
    * @default 'vertical'
    */
   orientation?: 'horizontal' | 'vertical';
-  /**
-   * Tamanho do texto e espaçamento dos itens.
-   *
-   * @default 'md'
-   */
-  size?: 'sm' | 'md' | 'lg';
 };
 export declare const dataListDefaultVariants: Required<DataListVariants>;
 export declare const DataListContextProvider: import("react").Provider<DataListVariants>, useDataListContext: () => DataListVariants;

package/dist/components/display/data-list/use-data-list-context.js

@@ -2,8 +2,7 @@ import { createContext } from "@lucasbernardosn/react-utils";
 //#region src/components/display/data-list/use-data-list-context.ts
 const dataListDefaultVariants = {
 	divided: false,
-	orientation: "vertical",
-	size: "md"
+	orientation: "vertical"
 };
 const [DataListContextProvider, useDataListContext] = createContext({
 	name: "DataListContext",

package/dist/components/display/data-list/use-data-list-context.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-data-list-context.js","names":[],"sources":["../../../../src/components/display/data-list/use-data-list-context.ts"],"sourcesContent":["import { createContext } from '@lucasbernardosn/react-utils';\n\n/**\n * Variantes do DataList. Informadas no `DataList.Root` e repassadas às partes por contexto.\n */\nexport type DataListVariants = {\n  /**\n   * Linha entre os itens.\n   *\n   * @default false\n   */\n  divided?: boolean;\n  /**\n   * Orientação da lista, não do par rótulo/valor: `vertical` empilha os itens, com rótulo e valor\n   * lado a lado; `horizontal` põe os itens em linha, com o valor abaixo do rótulo.\n   *\n   * @default 'vertical'\n   */\n  orientation?: 'horizontal' | 'vertical';\n  /**\n   * Tamanho do texto e espaçamento dos itens.\n   *\n   * @default 'md'\n   */\n  size?: 'sm' | 'md' | 'lg';\n};\n\nexport const dataListDefaultVariants: Required<DataListVariants> = {\n  divided: false,\n  orientation: 'vertical',\n  size: 'md',\n};\n\nexport const [DataListContextProvider, useDataListContext] =\n  createContext<DataListVariants>({\n    name: 'DataListContext',\n    providers: ['DataList.Root'],\n  });\n"],"mappings":";;AA2BA,MAAa,0BAAsD;CACjE,SAAS;CACT,aAAa;CACb,MAAM;AACR;AAEA,MAAa,CAAC,yBAAyB,sBACrC,cAAgC;CAC9B,MAAM;CACN,WAAW,CAAC,eAAe;AAC7B,CAAC"}
+{"version":3,"file":"use-data-list-context.js","names":[],"sources":["../../../../src/components/display/data-list/use-data-list-context.ts"],"sourcesContent":["import { createContext } from '@lucasbernardosn/react-utils';\n\n/**\n * Variantes do DataList. Informadas no `DataList.Root` e repassadas às partes por contexto.\n */\nexport type DataListVariants = {\n  /**\n   * Linha entre os itens.\n   *\n   * @default false\n   */\n  divided?: boolean;\n  /**\n   * Orientação da lista, não do par rótulo/valor: `vertical` empilha os itens, com rótulo e valor\n   * lado a lado; `horizontal` põe os itens em linha, com o valor abaixo do rótulo.\n   *\n   * @default 'vertical'\n   */\n  orientation?: 'horizontal' | 'vertical';\n};\n\nexport const dataListDefaultVariants: Required<DataListVariants> = {\n  divided: false,\n  orientation: 'vertical',\n};\n\nexport const [DataListContextProvider, useDataListContext] =\n  createContext<DataListVariants>({\n    name: 'DataListContext',\n    providers: ['DataList.Root'],\n  });\n"],"mappings":";;AAqBA,MAAa,0BAAsD;CACjE,SAAS;CACT,aAAa;AACf;AAEA,MAAa,CAAC,yBAAyB,sBACrC,cAAgC;CAC9B,MAAM;CACN,WAAW,CAAC,eAAe;AAC7B,CAAC"}

package/dist/components/display/status/index.d.ts

@@ -0,0 +1,3 @@
+import { StatusVariants } from "./status-variants.js";
+import { Status, StatusProps } from "./status.js";
+export { Status, type StatusProps, type StatusVariants };

package/dist/components/display/status/index.js

@@ -0,0 +1,2 @@
+import { Status } from "./status.js";
+export { Status };

package/dist/components/display/status/status-variants.d.ts

@@ -0,0 +1,31 @@
+import { ColorSchemeSemantic } from "../../../types/color-scheme.js";
+//#region src/components/display/status/status-variants.d.ts
+export type StatusVariants = {
+  /**
+   * Cor do ponto, entre as cores de estado: `red`, `green`, `blue` e `amber`, mais `gray` e
+   * `brand`. O texto não muda de cor.
+   *
+   * @default 'gray'
+   */
+  colorScheme?: ColorSchemeSemantic;
+  /**
+   * Tamanho do texto, que o ponto acompanha (`0.64em`): `sm` = `text-xs`, `md` = `text-sm`, `lg` =
+   * `text-base`.
+   *
+   * @default 'md'
+   */
+  size?: 'sm' | 'md' | 'lg';
+};
+export declare const statusDefaultVariants: Required<StatusVariants>;
+/**
+ * O `colorScheme` só declara `--status-dot`, e o ponto, um `::before` do próprio elemento, a lê.
+ * Sendo pseudo-elemento, ele fica fora da árvore de acessibilidade: quem diz o estado é o texto.
+ * O `forced-color-adjust-none` fica só no ponto, para a cor sobreviver ao modo de alto contraste
+ * do Windows sem tirar a adaptação do texto.
+ */
+export declare const statusVariants: (props?: ({
+  colorScheme?: "gray" | "brand" | "red" | "green" | "blue" | "amber" | null | undefined;
+  size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//#endregion
+//# sourceMappingURL=status-variants.d.ts.map

package/dist/components/display/status/status-variants.js

@@ -0,0 +1,46 @@
+import { cva } from "class-variance-authority";
+//#region src/components/display/status/status-variants.ts
+const statusDefaultVariants = {
+	colorScheme: "gray",
+	size: "md"
+};
+/**
+* O `colorScheme` só declara `--status-dot`, e o ponto, um `::before` do próprio elemento, a lê.
+* Sendo pseudo-elemento, ele fica fora da árvore de acessibilidade: quem diz o estado é o texto.
+* O `forced-color-adjust-none` fica só no ponto, para a cor sobreviver ao modo de alto contraste
+* do Windows sem tirar a adaptação do texto.
+*/
+const statusVariants = cva([
+	"inline-flex",
+	"items-center",
+	"gap-2",
+	"align-middle",
+	"text-gray-12",
+	"before:content-[\"\"]",
+	"before:size-[0.64em]",
+	"before:shrink-0",
+	"before:rounded-full",
+	"before:bg-(--status-dot)",
+	"before:forced-color-adjust-none"
+], {
+	variants: {
+		colorScheme: {
+			gray: "[--status-dot:var(--color-gray-9)]",
+			brand: "[--status-dot:var(--color-brand-9)]",
+			red: "[--status-dot:var(--color-red-9)]",
+			green: "[--status-dot:var(--color-green-9)]",
+			blue: "[--status-dot:var(--color-blue-9)]",
+			amber: "[--status-dot:var(--color-amber-9)]"
+		},
+		size: {
+			sm: "text-xs",
+			md: "text-sm",
+			lg: "text-base"
+		}
+	},
+	defaultVariants: statusDefaultVariants
+});
+//#endregion
+export { statusDefaultVariants, statusVariants };
+
+//# sourceMappingURL=status-variants.js.map

package/dist/components/display/status/status-variants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-variants.js","names":[],"sources":["../../../../src/components/display/status/status-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { ColorSchemeSemantic } from '#types';\n\nexport type StatusVariants = {\n  /**\n   * Cor do ponto, entre as cores de estado: `red`, `green`, `blue` e `amber`, mais `gray` e\n   * `brand`. O texto não muda de cor.\n   *\n   * @default 'gray'\n   */\n  colorScheme?: ColorSchemeSemantic;\n  /**\n   * Tamanho do texto, que o ponto acompanha (`0.64em`): `sm` = `text-xs`, `md` = `text-sm`, `lg` =\n   * `text-base`.\n   *\n   * @default 'md'\n   */\n  size?: 'sm' | 'md' | 'lg';\n};\n\nexport const statusDefaultVariants: Required<StatusVariants> = {\n  colorScheme: 'gray',\n  size: 'md',\n};\n\n/**\n * O `colorScheme` só declara `--status-dot`, e o ponto, um `::before` do próprio elemento, a lê.\n * Sendo pseudo-elemento, ele fica fora da árvore de acessibilidade: quem diz o estado é o texto.\n * O `forced-color-adjust-none` fica só no ponto, para a cor sobreviver ao modo de alto contraste\n * do Windows sem tirar a adaptação do texto.\n */\nexport const statusVariants = cva(\n  [\n    'inline-flex',\n    'items-center',\n    'gap-2',\n    'align-middle',\n\n    'text-gray-12',\n\n    'before:content-[\"\"]',\n    'before:size-[0.64em]',\n    'before:shrink-0',\n    'before:rounded-full',\n    'before:bg-(--status-dot)',\n    'before:forced-color-adjust-none',\n  ],\n  {\n    variants: {\n      colorScheme: {\n        gray: '[--status-dot:var(--color-gray-9)]',\n        brand: '[--status-dot:var(--color-brand-9)]',\n        red: '[--status-dot:var(--color-red-9)]',\n        green: '[--status-dot:var(--color-green-9)]',\n        blue: '[--status-dot:var(--color-blue-9)]',\n        amber: '[--status-dot:var(--color-amber-9)]',\n      },\n      size: {\n        sm: 'text-xs',\n        md: 'text-sm',\n        lg: 'text-base',\n      },\n    },\n    defaultVariants: statusDefaultVariants,\n  },\n);\n"],"mappings":";;AAoBA,MAAa,wBAAkD;CAC7D,aAAa;CACb,MAAM;AACR;;;;;;;AAQA,MAAa,iBAAiB,IAC5B;CACE;CACA;CACA;CACA;CAEA;CAEA;CACA;CACA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU;EACR,aAAa;GACX,MAAM;GACN,OAAO;GACP,KAAK;GACL,OAAO;GACP,MAAM;GACN,OAAO;EACT;EACA,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;CACF;CACA,iBAAiB;AACnB,CACF"}

package/dist/components/display/status/status.d.ts

@@ -0,0 +1,23 @@
+import { StatusVariants } from "./status-variants.js";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
+import { useRender } from "@base-ui/react";
+//#region src/components/display/status/status.d.ts
+export type StatusProps = MergeOverride<useRender.ComponentProps<'span'>, StatusVariants>;
+/**
+ * Estado de um registro: um ponto colorido e o rótulo ao lado ("Pago", "Vencido"). Sem fundo nem
+ * borda, é mais discreto que o `Badge`, para listas e tabelas com muitas linhas.
+ *
+ * O ponto é decorativo e a cor sozinha não comunica: o texto diz o estado. Um ponto sem texto
+ * precisa do estado em um `sr-only` nos filhos.
+ *
+ * @example
+ * ```tsx
+ * <Status colorScheme="green">Pago</Status>
+ * ```
+ */
+export declare const Status: {
+  (props: StatusProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=status.d.ts.map

package/dist/components/display/status/status.js

@@ -0,0 +1,36 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { statusVariants } from "./status-variants.js";
+import { createSplitProps } from "@lucasbernardosn/ts-utils";
+import { mergeProps, useRender } from "@base-ui/react";
+//#region src/components/display/status/status.tsx
+const splitVariantProps = createSplitProps();
+/**
+* Estado de um registro: um ponto colorido e o rótulo ao lado ("Pago", "Vencido"). Sem fundo nem
+* borda, é mais discreto que o `Badge`, para listas e tabelas com muitas linhas.
+*
+* O ponto é decorativo e a cor sozinha não comunica: o texto diz o estado. Um ponto sem texto
+* precisa do estado em um `sr-only` nos filhos.
+*
+* @example
+* ```tsx
+* <Status colorScheme="green">Pago</Status>
+* ```
+*/
+const Status = (props) => {
+	const [variantProps, elementProps] = splitVariantProps(props, ["colorScheme", "size"]);
+	const { render, className, ...rest } = elementProps;
+	const baseProps = {
+		"data-component": "Status",
+		className: mergeTwClassNames(statusVariants(variantProps), className)
+	};
+	return useRender({
+		render,
+		defaultTagName: "span",
+		props: mergeProps(baseProps, rest)
+	});
+};
+Status.displayName = "Status";
+//#endregion
+export { Status };
+
+//# sourceMappingURL=status.js.map

package/dist/components/display/status/status.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"status.js","names":[],"sources":["../../../../src/components/display/status/status.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport {\n  createSplitProps,\n  type MergeOverride,\n} from '@lucasbernardosn/ts-utils';\nimport { mergeTwClassNames } from '#utils';\nimport { type StatusVariants, statusVariants } from './status-variants';\n\nexport type StatusProps = MergeOverride<\n  useRender.ComponentProps<'span'>,\n  StatusVariants\n>;\n\nconst splitVariantProps = createSplitProps<StatusVariants>();\n\n/**\n * Estado de um registro: um ponto colorido e o rótulo ao lado (\"Pago\", \"Vencido\"). Sem fundo nem\n * borda, é mais discreto que o `Badge`, para listas e tabelas com muitas linhas.\n *\n * O ponto é decorativo e a cor sozinha não comunica: o texto diz o estado. Um ponto sem texto\n * precisa do estado em um `sr-only` nos filhos.\n *\n * @example\n * ```tsx\n * <Status colorScheme=\"green\">Pago</Status>\n * ```\n */\nexport const Status = (props: StatusProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, [\n    'colorScheme',\n    'size',\n  ]);\n\n  const { render, className, ...rest } = elementProps;\n\n  const baseProps = {\n    'data-component': 'Status',\n    className: mergeTwClassNames(statusVariants(variantProps), className),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'span',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nStatus.displayName = 'Status';\n"],"mappings":";;;;;AAaA,MAAM,oBAAoB,iBAAiC;;;;;;;;;;;;;AAc3D,MAAa,UAAU,UAAuB;CAC5C,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAC5D,eACA,MACF,CAAC;CAED,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBAAkB,eAAe,YAAY,GAAG,SAAS;CACtE;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,OAAO,cAAc"}

package/dist/components/display/tag/index.d.ts

@@ -0,0 +1,2 @@
+import { index_parts_d_exports } from "./index.parts.js";
+export { index_parts_d_exports as Tag };

package/dist/components/display/tag/index.js

@@ -0,0 +1,2 @@
+import { index_parts_exports } from "./index.parts.js";
+export { index_parts_exports as Tag };

package/dist/components/display/tag/index.parts.d.ts

@@ -0,0 +1,10 @@
+import { TagClose, TagCloseProps } from "./tag-close.js";
+import { TagLabel, TagLabelProps } from "./tag-label.js";
+import { TagRootVariants } from "./tag-root-variants.js";
+import { TagRoot, TagRootProps } from "./tag-root.js";
+declare namespace index_parts_d_exports {
+  export { TagClose as Close, TagCloseProps as CloseProps, TagLabel as Label, TagLabelProps as LabelProps, TagRoot as Root, TagRootProps as RootProps, TagRootVariants as RootVariants };
+}
+//#endregion
+export { TagClose as Close, type TagCloseProps as CloseProps, TagLabel as Label, type TagLabelProps as LabelProps, TagRoot as Root, type TagRootProps as RootProps, type TagRootVariants as RootVariants, index_parts_d_exports };
+//# sourceMappingURL=index.parts.d.ts.map

package/dist/components/display/tag/index.parts.js

@@ -0,0 +1,14 @@
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { TagClose } from "./tag-close.js";
+import { TagLabel } from "./tag-label.js";
+import { TagRoot } from "./tag-root.js";
+//#region src/components/display/tag/index.parts.ts
+var index_parts_exports = /* @__PURE__ */ __exportAll({
+	Close: () => TagClose,
+	Label: () => TagLabel,
+	Root: () => TagRoot
+});
+//#endregion
+export { TagClose as Close, TagLabel as Label, TagRoot as Root, index_parts_exports };
+
+//# sourceMappingURL=index.parts.js.map

package/dist/components/display/tag/index.parts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/components/display/tag/index.parts.ts"],"sourcesContent":["export { TagClose as Close } from './tag-close';\nexport { TagLabel as Label } from './tag-label';\nexport { TagRoot as Root } from './tag-root';\n\n/* types */\n\nexport type { TagCloseProps as CloseProps } from './tag-close';\nexport type { TagLabelProps as LabelProps } from './tag-label';\nexport type { TagRootProps as RootProps } from './tag-root';\nexport type { TagRootVariants as RootVariants } from './tag-root-variants';\n"],"mappings":""}

package/dist/components/display/tag/tag-close.d.ts

@@ -0,0 +1,16 @@
+import { useRender } from "@base-ui/react";
+//#region src/components/display/tag/tag-close.d.ts
+export type TagCloseProps = useRender.ComponentProps<'button'>;
+/**
+ * Botão de remover a tag, com um X por padrão (os filhos o substituem). O tamanho vem do `size` do
+ * `Tag.Root`, em `--tag-close-size`, e o fundo do hover, da cor do texto da tag.
+ *
+ * O nome padrão é "Remover". Numa lista de tags, diga o que sai (`aria-label="Remover o filtro
+ * Vencidos"`): com o mesmo nome em todas, o leitor de tela não as distingue.
+ */
+export declare const TagClose: {
+  (props: TagCloseProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=tag-close.d.ts.map

package/dist/components/display/tag/tag-close.js

@@ -0,0 +1,44 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { Icon } from "../icon/icon.js";
+import { mergeProps, useRender } from "@base-ui/react";
+import { jsx } from "react/jsx-runtime";
+import { XIcon } from "@phosphor-icons/react";
+//#region src/components/display/tag/tag-close.tsx
+/**
+* Botão de remover a tag, com um X por padrão (os filhos o substituem). O tamanho vem do `size` do
+* `Tag.Root`, em `--tag-close-size`, e o fundo do hover, da cor do texto da tag.
+*
+* O nome padrão é "Remover". Numa lista de tags, diga o que sai (`aria-label="Remover o filtro
+* Vencidos"`): com o mesmo nome em todas, o leitor de tela não as distingue.
+*/
+const TagClose = (props) => {
+	const { render, className, children, ...rest } = props;
+	const baseProps = {
+		"data-component": "Tag.Close",
+		type: "button",
+		"aria-label": "Remover",
+		children: children ?? /* @__PURE__ */ jsx(Icon, { render: /* @__PURE__ */ jsx(XIcon, {}) }),
+		className: mergeTwClassNames([
+			"inline-flex",
+			"items-center",
+			"justify-center",
+			"shrink-0",
+			"size-(--tag-close-size)",
+			"-me-1",
+			"rounded-xs",
+			"cursor-pointer",
+			"hover:bg-current/15",
+			"focus-ring-outside"
+		], className)
+	};
+	return useRender({
+		render,
+		defaultTagName: "button",
+		props: mergeProps(baseProps, rest)
+	});
+};
+TagClose.displayName = "Tag.Close";
+//#endregion
+export { TagClose };
+
+//# sourceMappingURL=tag-close.js.map

package/dist/components/display/tag/tag-close.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag-close.js","names":[],"sources":["../../../../src/components/display/tag/tag-close.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { XIcon } from '@phosphor-icons/react';\nimport { Icon } from '#components/display/icon';\nimport { mergeTwClassNames } from '#utils';\n\nexport type TagCloseProps = useRender.ComponentProps<'button'>;\n\n/**\n * Botão de remover a tag, com um X por padrão (os filhos o substituem). O tamanho vem do `size` do\n * `Tag.Root`, em `--tag-close-size`, e o fundo do hover, da cor do texto da tag.\n *\n * O nome padrão é \"Remover\". Numa lista de tags, diga o que sai (`aria-label=\"Remover o filtro\n * Vencidos\"`): com o mesmo nome em todas, o leitor de tela não as distingue.\n */\nexport const TagClose = (props: TagCloseProps) => {\n  const { render, className, children, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'Tag.Close',\n    type: 'button',\n    'aria-label': 'Remover',\n    children: children ?? <Icon render={<XIcon />} />,\n    className: mergeTwClassNames(\n      [\n        'inline-flex',\n        'items-center',\n        'justify-center',\n        'shrink-0',\n\n        'size-(--tag-close-size)',\n        // Encosta o X no fim da tag, no lugar do padding da direita.\n        '-me-1',\n\n        'rounded-xs',\n\n        'cursor-pointer',\n        // A cor do texto da tag, transparente: funciona sobre qualquer `variant`, inclusive a `solid`.\n        'hover:bg-current/15',\n\n        'focus-ring-outside',\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'button',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nTagClose.displayName = 'Tag.Close';\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAa,YAAY,UAAyB;CAChD,MAAM,EAAE,QAAQ,WAAW,UAAU,GAAG,SAAS;CAEjD,MAAM,YAAY;EAChB,kBAAkB;EAClB,MAAM;EACN,cAAc;EACd,UAAU,YAAY,oBAAC,MAAD,EAAM,QAAQ,oBAAC,OAAD,CAAQ,CAAA,EAAI,CAAA;EAChD,WAAW,kBACT;GACE;GACA;GACA;GACA;GAEA;GAEA;GAEA;GAEA;GAEA;GAEA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,SAAS,cAAc"}

package/dist/components/display/tag/tag-label.d.ts

@@ -0,0 +1,12 @@
+import { useRender } from "@base-ui/react";
+//#region src/components/display/tag/tag-label.d.ts
+export type TagLabelProps = useRender.ComponentProps<'span'>;
+/**
+ * Texto da tag. Um texto que não cabe na largura do `Tag.Root` termina em reticências.
+ */
+export declare const TagLabel: {
+  (props: TagLabelProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=tag-label.d.ts.map

package/dist/components/display/tag/tag-label.js

@@ -0,0 +1,23 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { mergeProps, useRender } from "@base-ui/react";
+//#region src/components/display/tag/tag-label.tsx
+/**
+* Texto da tag. Um texto que não cabe na largura do `Tag.Root` termina em reticências.
+*/
+const TagLabel = (props) => {
+	const { render, className, ...rest } = props;
+	const baseProps = {
+		"data-component": "Tag.Label",
+		className: mergeTwClassNames(["min-w-0", "truncate"], className)
+	};
+	return useRender({
+		render,
+		defaultTagName: "span",
+		props: mergeProps(baseProps, rest)
+	});
+};
+TagLabel.displayName = "Tag.Label";
+//#endregion
+export { TagLabel };
+
+//# sourceMappingURL=tag-label.js.map

package/dist/components/display/tag/tag-label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag-label.js","names":[],"sources":["../../../../src/components/display/tag/tag-label.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type TagLabelProps = useRender.ComponentProps<'span'>;\n\n/**\n * Texto da tag. Um texto que não cabe na largura do `Tag.Root` termina em reticências.\n */\nexport const TagLabel = (props: TagLabelProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'Tag.Label',\n    className: mergeTwClassNames(['min-w-0', 'truncate'], className),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'span',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nTagLabel.displayName = 'Tag.Label';\n"],"mappings":";;;;;;AAQA,MAAa,YAAY,UAAyB;CAChD,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBAAkB,CAAC,WAAW,UAAU,GAAG,SAAS;CACjE;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,SAAS,cAAc"}

package/dist/components/display/tag/tag-root-variants.d.ts

@@ -0,0 +1,39 @@
+import { ColorSchemeFull } from "../../../types/color-scheme.js";
+//#region src/components/display/tag/tag-root-variants.d.ts
+export type TagRootVariants = {
+  /**
+   * Cor do texto, do fundo e da borda, como no `Badge`.
+   *
+   * @default 'gray'
+   */
+  colorScheme?: ColorSchemeFull;
+  /**
+   * Altura, padding, tamanho do texto e do botão de remover: `sm` = `h-5`, `md` = `h-6`,
+   * `lg` = `h-7`.
+   *
+   * @default 'sm'
+   */
+  size?: 'sm' | 'md' | 'lg';
+  /**
+   * Fundo e borda: `subtle` só com fundo, `surface` com fundo e borda, `outline` só com borda e
+   * `solid` com o fundo cheio (passo 9) e o texto em contraste.
+   *
+   * @default 'subtle'
+   */
+  variant?: 'subtle' | 'surface' | 'outline' | 'solid';
+};
+export declare const tagRootDefaultVariants: Required<TagRootVariants>;
+/**
+ * Cópia de `badgeVariants`, a origem do visual do rótulo curto, onde as variáveis de cor estão
+ * explicadas (tabela no README de `display`). As diferenças:
+ * - variáveis com o prefixo `--tag-`;
+ * - `max-w-full` e `min-w-0`, para o `Tag.Label` truncar um texto longo;
+ * - cada `size` declara o tamanho do `Tag.Close` em `--tag-close-size`.
+ */
+export declare const tagRootVariants: (props?: ({
+  colorScheme?: "ruby" | "gray" | "brand" | "red" | "green" | "blue" | "teal" | "pink" | "purple" | "cyan" | "orange" | "brown" | "yellow" | "amber" | "bronze" | "gold" | "tomato" | "crimson" | "plum" | "violet" | "iris" | "indigo" | "jade" | "grass" | "lime" | "mint" | "sky" | null | undefined;
+  size?: "sm" | "md" | "lg" | null | undefined;
+  variant?: "solid" | "subtle" | "surface" | "outline" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//#endregion
+//# sourceMappingURL=tag-root-variants.d.ts.map