@stack-spot/citric-react 0.4.0 → 0.6.0

package/dist/citric.css

@@ -2188,6 +2188,7 @@ input[data-citric="favorite"][type="checkbox"] {
   border: 1px solid var(--scheme-500, var(--primary-500));
   gap: var(--spacing-2);
   position: relative;
+  text-decoration: none;
 
   /* Appearances */
 

package/dist/components/Card.d.ts

@@ -1,5 +1,11 @@
 import { WithColorScheme } from '../types.js';
 export interface BaseCardProps extends WithColorScheme {
+    /**
+     * HTML tag to render.
+     *
+     * @default 'div'
+     */
+    tag?: 'div' | 'header' | 'ul' | 'ol' | 'dl' | 'section' | 'article';
     onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
     /**
      * The size of the card.
@@ -15,5 +21,5 @@ export interface BaseCardProps extends WithColorScheme {
     bgLevel?: 300 | 400 | 500 | 600;
 }
 export type CardProps = React.JSX.IntrinsicElements['div'] & BaseCardProps;
-export declare const Card: ({ onClick, size, bgLevel, className, children, ...props }: CardProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Card: ({ tag, onClick, size, bgLevel, className, children, ...props }: CardProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Card.d.ts.map

package/dist/components/Card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/components/Card.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAG1C,MAAM,WAAW,aAAc,SAAQ,eAAe;IACpD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC5D;;;;OAIG;IACH,IAAI,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;IACxD;;;;OAIG;IACH,OAAO,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;CACjC;AAED,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG,aAAa,CAAA;AAE1E,eAAO,MAAM,IAAI,GAAI,2DAA2D,SAAS,4CASxF,CAAA"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/components/Card.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAG1C,MAAM,WAAW,aAAc,SAAQ,eAAe;IACpD;;;;OAIG;IACH,GAAG,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,GAAG,SAAS,CAAC;IACpE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC5D;;;;OAIG;IACH,IAAI,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;IACxD;;;;OAIG;IACH,OAAO,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;CACjC;AAED,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG,aAAa,CAAA;AAE1E,eAAO,MAAM,IAAI,GAAI,gEAAwE,SAAS,4CASrG,CAAA"}

package/dist/components/Card.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { listToClass } from '@stack-spot/portal-theme';
 import { CitricComponent } from './CitricComponent.js';
-export const Card = ({ onClick, size, bgLevel, className, children, ...props }) => (_jsx(CitricComponent, { tag: "div", component: "card", className: listToClass([onClick && 'clickable', size, bgLevel && `bg-${bgLevel}`, className]), ...props, children: children }));
+export const Card = ({ tag = 'div', onClick, size, bgLevel, className, children, ...props }) => (_jsx(CitricComponent, { tag: tag, component: "card", className: listToClass([onClick && 'clickable', size, bgLevel && `bg-${bgLevel}`, className]), ...props, children: children }));
 //# sourceMappingURL=Card.js.map

package/dist/components/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../src/components/Card.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAEtD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAoBnD,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAa,EAAE,EAAE,CAAC,CAC5F,KAAC,eAAe,IACd,GAAG,EAAC,KAAK,EACT,SAAS,EAAC,MAAM,EAChB,SAAS,EAAE,WAAW,CAAC,CAAC,OAAO,IAAI,WAAW,EAAE,IAAI,EAAE,OAAO,IAAI,MAAM,OAAO,EAAE,EAAE,SAAS,CAAC,CAAC,KACzF,KAAK,YAER,QAAQ,GACO,CACnB,CAAA"}
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../src/components/Card.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAEtD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AA0BnD,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,EAAE,GAAG,GAAG,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAa,EAAE,EAAE,CAAC,CACzG,KAAC,eAAe,IACd,GAAG,EAAE,GAAG,EACR,SAAS,EAAC,MAAM,EAChB,SAAS,EAAE,WAAW,CAAC,CAAC,OAAO,IAAI,WAAW,EAAE,IAAI,EAAE,OAAO,IAAI,MAAM,OAAO,EAAE,EAAE,SAAS,CAAC,CAAC,KACzF,KAAK,YAER,QAAQ,GACO,CACnB,CAAA"}

package/dist/components/CitricComponent.d.ts

@@ -1,14 +1,17 @@
 import { WithColorPalette, WithColorScheme } from '../types.js';
 export type CitricComponentName = 'alert' | 'avatar' | 'badge' | 'blockquote' | 'breadcrumb' | 'button' | 'card' | 'checkbox' | 'checkbox-row' | 'divider' | 'field-group' | 'form-group' | 'form' | 'icon-box' | 'input' | 'link' | 'pagination' | 'progress-bar' | 'progress-circular' | 'radio' | 'radio-row' | 'rating' | 'select' | 'select-box' | 'skeleton' | 'slider' | 'switch' | 'switch-row' | 'table' | 'tabs' | 'accordion' | 'favorite' | 'textarea' | 'avatar-group' | 'labeled-slider' | 'rich-select' | 'tooltip' | 'menu' | 'circle';
-interface CustomProps<T extends keyof JSX.IntrinsicElements> extends WithColorScheme, WithColorPalette {
-    tag: T;
+interface BaseCitricProps extends WithColorScheme, WithColorPalette {
     component: CitricComponentName;
 }
-type Props<T extends keyof JSX.IntrinsicElements> = CustomProps<T> & JSX.IntrinsicElements[T];
 interface CitricComponentType {
-    <T extends keyof JSX.IntrinsicElements>(props: Props<T>): React.ReactNode;
+    <T extends keyof JSX.IntrinsicElements>(props: {
+        tag: T;
+    } & BaseCitricProps & JSX.IntrinsicElements[T]): React.ReactNode;
+    <T extends Record<string, any>>(props: {
+        render: React.FC<T>;
+    } & BaseCitricProps & T): React.ReactNode;
 }
-export declare function asCitricProps({ colorScheme, colorPalette, component, ...props }: Omit<CustomProps<any>, 'tag'> & Record<string, any>): Record<string, any>;
+export declare function asCitricProps({ colorScheme, colorPalette, component, ...props }: BaseCitricProps & Record<string, any>): Record<string, any>;
 export declare const CitricComponent: CitricComponentType;
 export {};
 //# sourceMappingURL=CitricComponent.d.ts.map

package/dist/components/CitricComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CitricComponent.d.ts","sourceRoot":"","sources":["../../src/components/CitricComponent.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAE5D,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,YAAY,GAAG,YAAY,GAAG,QAAQ,GAAG,MAAM,GAAG,UAAU,GAC3H,cAAc,GAAG,SAAS,GAAG,aAAa,GAAG,YAAY,GAAG,MAAM,GAAG,UAAU,GAAG,OAAO,GAAG,MAAM,GAAG,YAAY,GAAG,cAAc,GAClI,mBAAmB,GAAG,OAAO,GAAG,WAAW,GAAG,QAAQ,GAAG,QAAQ,GAAG,YAAY,GAAG,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,YAAY,GAClI,OAAO,GAAG,MAAM,GAAG,WAAW,GAAG,UAAU,GAAG,UAAU,GAAG,cAAc,GAAG,gBAAgB,GAAG,aAAa,GAAG,SAAS,GAAG,MAAM,GACjI,QAAQ,CAAA;AAEV,UAAU,WAAW,CAAC,CAAC,SAAS,MAAM,GAAG,CAAC,iBAAiB,CAAE,SAAQ,eAAe,EAAE,gBAAgB;IACpG,GAAG,EAAE,CAAC,CAAC;IACP,SAAS,EAAE,mBAAmB,CAAC;CAChC;AAED,KAAK,KAAK,CAAC,CAAC,SAAS,MAAM,GAAG,CAAC,iBAAiB,IAAI,WAAW,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAA;AAE7F,UAAU,mBAAmB;IAC3B,CAAC,CAAC,SAAS,MAAM,GAAG,CAAC,iBAAiB,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;CAC3E;AAED,wBAAgB,aAAa,CAAC,EAAE,WAAW,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,uBAKpI;AAGD,eAAO,MAAM,eAAe,EAAE,mBAK7B,CAAA"}
+{"version":3,"file":"CitricComponent.d.ts","sourceRoot":"","sources":["../../src/components/CitricComponent.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAE5D,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,YAAY,GAAG,YAAY,GAAG,QAAQ,GAAG,MAAM,GAAG,UAAU,GAC3H,cAAc,GAAG,SAAS,GAAG,aAAa,GAAG,YAAY,GAAG,MAAM,GAAG,UAAU,GAAG,OAAO,GAAG,MAAM,GAAG,YAAY,GAAG,cAAc,GAClI,mBAAmB,GAAG,OAAO,GAAG,WAAW,GAAG,QAAQ,GAAG,QAAQ,GAAG,YAAY,GAAG,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,YAAY,GAClI,OAAO,GAAG,MAAM,GAAG,WAAW,GAAG,UAAU,GAAG,UAAU,GAAG,cAAc,GAAG,gBAAgB,GAAG,aAAa,GAAG,SAAS,GAAG,MAAM,GACjI,QAAQ,CAAA;AAEV,UAAU,eAAgB,SAAQ,eAAe,EAAE,gBAAgB;IACjE,SAAS,EAAE,mBAAmB,CAAC;CAChC;AAED,UAAU,mBAAmB;IAC3B,CAAC,CAAC,SAAS,MAAM,GAAG,CAAC,iBAAiB,EAAE,KAAK,EAAE;QAAE,GAAG,EAAE,CAAC,CAAA;KAAE,GAAG,eAAe,GAAG,GAAG,CAAC,iBAAiB,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;IACzH,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,KAAK,EAAE;QAAE,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG,eAAe,GAAG,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;CACxG;AAED,wBAAgB,aAAa,CAAC,EAAE,WAAW,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,uBAKtH;AAGD,eAAO,MAAM,eAAe,EAAE,mBAK7B,CAAA"}

package/dist/components/CitricComponent.js

@@ -9,7 +9,7 @@ export function asCitricProps({ colorScheme, colorPalette, component, ...props }
 }
 // eslint-disable-next-line react/display-name
 export const CitricComponent = forwardRef((props, ref) => {
-    const { tag, ...citricProps } = asCitricProps(props);
-    return createElement(tag, { ...citricProps, ref });
+    const { tag, render, ...citricProps } = asCitricProps(props);
+    return createElement(tag || render, { ...citricProps, ref });
 });
 //# sourceMappingURL=CitricComponent.js.map

package/dist/components/CitricComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"CitricComponent.js","sourceRoot":"","sources":["../../src/components/CitricComponent.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAoBjD,MAAM,UAAU,aAAa,CAAC,EAAE,WAAW,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,KAAK,EAAuD;IACnI,MAAM,WAAW,GAAwB,EAAE,GAAG,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,CAAA;IAC/E,IAAI,WAAW;QAAE,WAAW,CAAC,mBAAmB,CAAC,GAAG,WAAW,CAAA;IAC/D,IAAI,YAAY;QAAE,WAAW,CAAC,oBAAoB,CAAC,GAAG,YAAY,CAAA;IAClE,OAAO,WAAW,CAAA;AACpB,CAAC;AAED,8CAA8C;AAC9C,MAAM,CAAC,MAAM,eAAe,GAAwB,UAAU,CAC5D,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACb,MAAM,EAAE,GAAG,EAAE,GAAG,WAAW,EAAE,GAAG,aAAa,CAAC,KAAK,CAAC,CAAA;IACpD,OAAO,aAAa,CAAC,GAAG,EAAE,EAAE,GAAG,WAAW,EAAE,GAAG,EAAE,CAAC,CAAA;AACpD,CAAC,CACF,CAAA"}
+{"version":3,"file":"CitricComponent.js","sourceRoot":"","sources":["../../src/components/CitricComponent.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAkBjD,MAAM,UAAU,aAAa,CAAC,EAAE,WAAW,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,KAAK,EAAyC;IACrH,MAAM,WAAW,GAAwB,EAAE,GAAG,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,CAAA;IAC/E,IAAI,WAAW;QAAE,WAAW,CAAC,mBAAmB,CAAC,GAAG,WAAW,CAAA;IAC/D,IAAI,YAAY;QAAE,WAAW,CAAC,oBAAoB,CAAC,GAAG,YAAY,CAAA;IAClE,OAAO,WAAW,CAAA;AACpB,CAAC;AAED,8CAA8C;AAC9C,MAAM,CAAC,MAAM,eAAe,GAAwB,UAAU,CAC5D,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACb,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,WAAW,EAAE,GAAG,aAAa,CAAC,KAAK,CAAC,CAAA;IAC5D,OAAO,aAAa,CAAC,GAAG,IAAI,MAAM,EAAE,EAAE,GAAG,WAAW,EAAE,GAAG,EAAE,CAAC,CAAA;AAC9D,CAAC,CACF,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stack-spot/citric-react",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "author": "StackSpot",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/Card.tsx

@@ -3,6 +3,12 @@ import { WithColorScheme } from '../types'
 import { CitricComponent } from './CitricComponent'
 
 export interface BaseCardProps extends WithColorScheme {
+  /**
+   * HTML tag to render.
+   * 
+   * @default 'div'
+   */
+  tag?: 'div' | 'header' | 'ul' | 'ol' | 'dl' | 'section' | 'article',
   onClick?: (event: React.MouseEvent<HTMLDivElement>) => void,
   /**
    * The size of the card.
@@ -20,9 +26,9 @@ export interface BaseCardProps extends WithColorScheme {
 
 export type CardProps = React.JSX.IntrinsicElements['div'] & BaseCardProps
 
-export const Card = ({ onClick, size, bgLevel, className, children, ...props }: CardProps) => (
+export const Card = ({ tag = 'div', onClick, size, bgLevel, className, children, ...props }: CardProps) => (
   <CitricComponent
-    tag="div"
+    tag={tag}
     component="card"
     className={listToClass([onClick && 'clickable', size, bgLevel && `bg-${bgLevel}`, className])}
     {...props}

package/src/components/CitricComponent.ts

@@ -7,18 +7,16 @@ export type CitricComponentName = 'alert' | 'avatar' | 'badge' | 'blockquote' |
   'table' | 'tabs' | 'accordion' | 'favorite' | 'textarea' | 'avatar-group' | 'labeled-slider' | 'rich-select' | 'tooltip' | 'menu' |
   'circle'
 
-interface CustomProps<T extends keyof JSX.IntrinsicElements> extends WithColorScheme, WithColorPalette {
-  tag: T,
+interface BaseCitricProps extends WithColorScheme, WithColorPalette {
   component: CitricComponentName,
 } 
 
-type Props<T extends keyof JSX.IntrinsicElements> = CustomProps<T> & JSX.IntrinsicElements[T]
-
 interface CitricComponentType {
-  <T extends keyof JSX.IntrinsicElements>(props: Props<T>): React.ReactNode,
+  <T extends keyof JSX.IntrinsicElements>(props: { tag: T } & BaseCitricProps & JSX.IntrinsicElements[T]): React.ReactNode,
+  <T extends Record<string, any>>(props: { render: React.FC<T> } & BaseCitricProps & T): React.ReactNode,
 }
 
-export function asCitricProps({ colorScheme, colorPalette, component, ...props }: Omit<CustomProps<any>, 'tag'> & Record<string, any>) {
+export function asCitricProps({ colorScheme, colorPalette, component, ...props }: BaseCitricProps & Record<string, any>) {
   const citricProps: Record<string, any> = { ...props, 'data-citric': component }
   if (colorScheme) citricProps['data-color-scheme'] = colorScheme
   if (colorPalette) citricProps['data-color-palette'] = colorPalette
@@ -26,9 +24,9 @@ export function asCitricProps({ colorScheme, colorPalette, component, ...props }
 }
 
 // eslint-disable-next-line react/display-name
-export const CitricComponent: CitricComponentType = forwardRef<Props<any>, any>(
+export const CitricComponent: CitricComponentType = forwardRef<any, any>(
   (props, ref) => {
-    const { tag, ...citricProps } = asCitricProps(props)
-    return createElement(tag, { ...citricProps, ref })
+    const { tag, render, ...citricProps } = asCitricProps(props)
+    return createElement(tag || render, { ...citricProps, ref })
   },
 )