@stack-spot/citric-react 0.3.3 → 0.5.0

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<Props<any>, 'tag'>): 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,KAAK,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC,uBAKxG;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,EAA2B;IACvG,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/dist/components/Text.d.ts

@@ -17,11 +17,23 @@ export interface BaseTextProps<T extends SupportedTags = SupportedTags> extends
      * @default false
      */
     showMargins?: boolean;
+    /**
+     * Shortcut to `style.fontWeight`.
+     */
+    weight?: React.CSSProperties['fontWeight'];
+    /**
+     * Shortcut to `style.textAlign`.
+     */
+    align?: React.CSSProperties['textAlign'];
+    /**
+     * Shortcut to `style.whiteSpace = 'nowrap'; style.overflow = 'hidden'; style.textOverflow = 'ellipsis'`.
+     */
+    nowrapEllipsis?: boolean;
 }
 export type TextProps<T extends SupportedTags> = HTMLTag[T] & BaseTextProps<T>;
-export declare function Text<T extends SupportedTags>({ tag, appearance, color, showMargins, style, className, children, ...props }: TextProps<T>): import("react").DetailedReactHTMLElement<{
+export declare function Text<T extends SupportedTags>({ tag, appearance, color, showMargins, weight, align, nowrapEllipsis, style, className, children, ...props }: TextProps<T>): import("react").DetailedReactHTMLElement<{
     className: string;
     style: import("react").CSSProperties | undefined;
-} & Omit<TextProps<T>, "className" | "style" | "color" | "children" | "appearance" | "tag" | "showMargins">, HTMLElement>;
+} & Omit<TextProps<T>, "className" | "style" | "color" | "children" | "weight" | "appearance" | "tag" | "align" | "showMargins" | "nowrapEllipsis">, HTMLElement>;
 export {};
 //# sourceMappingURL=Text.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../src/components/Text.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAG7D,KAAK,aAAa,GAAG,MAAM,GAAG,OAAO,GAAG,GAAG,GAAG,IAAI,CAAC,GAAC,CAAC,GAAC,CAAC,GAAC,CAAC,GAAC,CAAC,GAAC,CAAC,EAAE,GAAG,KAAK,CAAA;AAEvE,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,aAAa,GAAG,aAAa,CAAE,SAAQ,SAAS;IACvF;;;OAGG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC;IACR;;;OAGG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,aAAa,IAAI,OAAO,CAAC,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC,CAAA;AAoC9E,wBAAgB,IAAI,CAAC,CAAC,SAAS,aAAa,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,CAAC,CAAC,CAAC;;;0HAaxI"}
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../src/components/Text.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAG7D,KAAK,aAAa,GAAG,MAAM,GAAG,OAAO,GAAG,GAAG,GAAG,IAAI,CAAC,GAAC,CAAC,GAAC,CAAC,GAAC,CAAC,GAAC,CAAC,GAAC,CAAC,EAAE,GAAG,KAAK,CAAA;AAEvE,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,aAAa,GAAG,aAAa,CAAE,SAAQ,SAAS;IACvF;;;OAGG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC;IACR;;;OAGG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;IAC3C;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IACzC;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,aAAa,IAAI,OAAO,CAAC,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC,CAAA;AAoC9E,wBAAgB,IAAI,CAAC,CAAC,SAAS,aAAa,EAC1C,EAAE,GAAG,EAAE,UAAU,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,CAAC,CAAC,CAAC;;;kKAiB3H"}

package/dist/components/Text.js

@@ -33,11 +33,17 @@ const appearanceToTag = {
     subtitle3: 'p',
     subtitle4: 'p',
 };
-export function Text({ tag, appearance, color, showMargins, style, className, children, ...props }) {
+export function Text({ tag, appearance, color, showMargins, weight, align, nowrapEllipsis, style, className, children, ...props }) {
     const renderedTag = tag || appearanceToTag[appearance || 'body2'];
     const renderedAppearance = appearance || (tag ? tagToAppearance[tag] : undefined);
     if (!appearance && !showMargins)
-        style = { ...style, margin: 0 };
+        style = { margin: 0, ...style };
+    if (weight)
+        style = { fontWeight: weight, ...style };
+    if (align)
+        style = { textAlign: align, ...style };
+    if (nowrapEllipsis)
+        style = { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', ...style };
     return createElement(renderedTag, {
         className: applyTextAppearance(listToClass([className, showMargins && 'text-with-margins']), renderedAppearance),
         style: applyColor(style, color),

package/dist/components/Text.js.map

@@ -1 +1 @@
-{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../src/components/Text.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAErC,OAAO,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAA;AAyB9D,MAAM,eAAe,GAAsD;IACzE,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,YAAY;IACnB,CAAC,EAAE,OAAO;IACV,GAAG,EAAE,OAAO;CACb,CAAA;AAED,MAAM,eAAe,GAA0C;IAC7D,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,KAAK,EAAE,GAAG;IACV,KAAK,EAAE,GAAG;IACV,KAAK,EAAE,KAAK;IACZ,KAAK,EAAE,KAAK;IACZ,QAAQ,EAAE,IAAI;IACd,UAAU,EAAE,OAAO;IACnB,WAAW,EAAE,GAAG;IAChB,WAAW,EAAE,GAAG;IAChB,SAAS,EAAE,GAAG;IACd,SAAS,EAAE,GAAG;IACd,SAAS,EAAE,GAAG;IACd,SAAS,EAAE,GAAG;CACf,CAAA;AAED,MAAM,UAAU,IAAI,CAA0B,EAAE,GAAG,EAAE,UAAU,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAgB;IACvI,MAAM,WAAW,GAAG,GAAG,IAAI,eAAe,CAAC,UAAU,IAAI,OAAO,CAAC,CAAA;IACjE,MAAM,kBAAkB,GAAG,UAAU,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;IACjF,IAAI,CAAC,UAAU,IAAI,CAAC,WAAW;QAAE,KAAK,GAAG,EAAE,GAAG,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,CAAA;IAChE,OAAO,aAAa,CAClB,WAAW,EACX;QACE,SAAS,EAAE,mBAAmB,CAAC,WAAW,CAAC,CAAC,SAAS,EAAE,WAAW,IAAI,mBAAmB,CAAC,CAAC,EAAE,kBAAkB,CAAC;QAChH,KAAK,EAAE,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC;QAC/B,GAAG,KAAK;KACT,EACD,QAAQ,CACT,CAAA;AACH,CAAC"}
+{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../src/components/Text.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAErC,OAAO,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAA;AAqC9D,MAAM,eAAe,GAAsD;IACzE,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,YAAY;IACnB,CAAC,EAAE,OAAO;IACV,GAAG,EAAE,OAAO;CACb,CAAA;AAED,MAAM,eAAe,GAA0C;IAC7D,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,KAAK,EAAE,GAAG;IACV,KAAK,EAAE,GAAG;IACV,KAAK,EAAE,KAAK;IACZ,KAAK,EAAE,KAAK;IACZ,QAAQ,EAAE,IAAI;IACd,UAAU,EAAE,OAAO;IACnB,WAAW,EAAE,GAAG;IAChB,WAAW,EAAE,GAAG;IAChB,SAAS,EAAE,GAAG;IACd,SAAS,EAAE,GAAG;IACd,SAAS,EAAE,GAAG;IACd,SAAS,EAAE,GAAG;CACf,CAAA;AAED,MAAM,UAAU,IAAI,CAClB,EAAE,GAAG,EAAE,UAAU,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAgB;IAE1H,MAAM,WAAW,GAAG,GAAG,IAAI,eAAe,CAAC,UAAU,IAAI,OAAO,CAAC,CAAA;IACjE,MAAM,kBAAkB,GAAG,UAAU,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;IACjF,IAAI,CAAC,UAAU,IAAI,CAAC,WAAW;QAAE,KAAK,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE,GAAG,KAAK,EAAE,CAAA;IAChE,IAAI,MAAM;QAAE,KAAK,GAAG,EAAE,UAAU,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,CAAA;IACpD,IAAI,KAAK;QAAE,KAAK,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,CAAA;IACjD,IAAI,cAAc;QAAE,KAAK,GAAG,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,CAAA;IAC5G,OAAO,aAAa,CAClB,WAAW,EACX;QACE,SAAS,EAAE,mBAAmB,CAAC,WAAW,CAAC,CAAC,SAAS,EAAE,WAAW,IAAI,mBAAmB,CAAC,CAAC,EAAE,kBAAkB,CAAC;QAChH,KAAK,EAAE,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC;QAC/B,GAAG,KAAK;KACT,EACD,QAAQ,CACT,CAAA;AACH,CAAC"}

package/package.json

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

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<Props<any>, 'tag'>) {
+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 })
   },
 )

package/src/components/Text.ts

@@ -22,6 +22,18 @@ export interface BaseTextProps<T extends SupportedTags = SupportedTags> extends
    * @default false
    */
   showMargins?: boolean,
+  /**
+   * Shortcut to `style.fontWeight`.
+   */
+  weight?: React.CSSProperties['fontWeight'],
+  /**
+   * Shortcut to `style.textAlign`.
+   */
+  align?: React.CSSProperties['textAlign'],
+  /**
+   * Shortcut to `style.whiteSpace = 'nowrap'; style.overflow = 'hidden'; style.textOverflow = 'ellipsis'`.
+   */
+  nowrapEllipsis?: boolean,
 }
 
 export type TextProps<T extends SupportedTags> = HTMLTag[T] & BaseTextProps<T>
@@ -60,10 +72,15 @@ const appearanceToTag: Record<TextAppearance, SupportedTags> = {
   subtitle4: 'p',
 }
 
-export function Text<T extends SupportedTags>({ tag, appearance, color, showMargins, style, className, children, ...props }: TextProps<T>) {
+export function Text<T extends SupportedTags>(
+  { tag, appearance, color, showMargins, weight, align, nowrapEllipsis, style, className, children, ...props }: TextProps<T>,
+) {
   const renderedTag = tag || appearanceToTag[appearance || 'body2']
   const renderedAppearance = appearance || (tag ? tagToAppearance[tag] : undefined)
-  if (!appearance && !showMargins) style = { ...style, margin: 0 }
+  if (!appearance && !showMargins) style = { margin: 0, ...style }
+  if (weight) style = { fontWeight: weight, ...style }
+  if (align) style = { textAlign: align, ...style }
+  if (nowrapEllipsis) style = { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', ...style }
   return createElement(
     renderedTag,
     {