@rovula/ui 0.0.22 → 0.0.23

package/dist/esm/types/components/Text/Text.d.ts

@@ -1,12 +1,13 @@
 import React from "react";
-export type TextProps = {
+export type TextProps<T extends React.ElementType> = {
     variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitile1" | "subtitile2" | "subtitile3" | "subtitile4" | "subtitile5" | "subtitile6" | "body1" | "body2" | "body3" | "body4" | "small1" | "small2" | "small3" | "small4" | "small5" | "label1" | "label2" | "buttonL" | "buttonMS";
     color?: "primary" | "secondary" | "success" | "tertiary" | "info" | "warning" | "error";
     children?: React.ReactNode;
     className?: string;
-    tag?: keyof JSX.IntrinsicElements;
+    tag?: T;
     style?: React.CSSProperties;
     id?: string;
-};
-declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<keyof JSX.IntrinsicElements | undefined>>;
-export default Text;
+} & React.ComponentProps<T>;
+type TextComponent<T extends React.ElementType> = React.ForwardRefExoticComponent<TextProps<T> & React.RefAttributes<HTMLElement>>;
+declare const ForwardedText: TextComponent<any>;
+export default ForwardedText;

package/dist/esm/types/components/Text/Text.stories.d.ts

@@ -1,21 +1,13 @@
 import React from "react";
 declare const meta: {
     title: string;
-    component: React.ForwardRefExoticComponent<import("./Text").TextProps & React.RefAttributes<keyof JSX.IntrinsicElements | undefined>>;
+    component: React.ForwardRefExoticComponent<any>;
     tags: string[];
     parameters: {
         layout: string;
     };
     decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/react").ReactRenderer, {
-        variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitile1" | "subtitile2" | "subtitile3" | "subtitile4" | "subtitile5" | "subtitile6" | "body1" | "body2" | "body3" | "body4" | "small1" | "small2" | "small3" | "small4" | "small5" | "label1" | "label2" | "buttonL" | "buttonMS" | undefined;
-        color?: "primary" | "secondary" | "tertiary" | "success" | "info" | "warning" | "error" | undefined;
-        children?: React.ReactNode;
-        className?: string | undefined;
-        tag?: keyof JSX.IntrinsicElements | undefined;
-        style?: React.CSSProperties | undefined;
-        id?: string | undefined;
-        ref?: React.LegacyRef<keyof JSX.IntrinsicElements | undefined> | undefined;
-        key?: React.Key | null | undefined;
+        [x: string]: any;
     }>) => import("react/jsx-runtime").JSX.Element)[];
 };
 export default meta;

package/dist/index.d.ts

@@ -80,16 +80,17 @@ declare const TextInput: React__default.ForwardRefExoticComponent<{
     labelClassName?: string | undefined;
 } & Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "size"> & React__default.RefAttributes<HTMLInputElement>>;
 
-type TextProps = {
+type TextProps<T extends React__default.ElementType> = {
     variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitile1" | "subtitile2" | "subtitile3" | "subtitile4" | "subtitile5" | "subtitile6" | "body1" | "body2" | "body3" | "body4" | "small1" | "small2" | "small3" | "small4" | "small5" | "label1" | "label2" | "buttonL" | "buttonMS";
     color?: "primary" | "secondary" | "success" | "tertiary" | "info" | "warning" | "error";
     children?: React__default.ReactNode;
     className?: string;
-    tag?: keyof JSX.IntrinsicElements;
+    tag?: T;
     style?: React__default.CSSProperties;
     id?: string;
-};
-declare const Text: React__default.ForwardRefExoticComponent<TextProps & React__default.RefAttributes<keyof JSX.IntrinsicElements | undefined>>;
+} & React__default.ComponentProps<T>;
+type TextComponent<T extends React__default.ElementType> = React__default.ForwardRefExoticComponent<TextProps<T> & React__default.RefAttributes<HTMLElement>>;
+declare const ForwardedText: TextComponent<any>;
 
 type Tab = {
     label: string;
@@ -408,4 +409,4 @@ declare const getTimestampUTC: (date: Date) => number;
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { ActionButton, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Button, type ButtonProps, Calendar, Checkbox, Collapsible, DataTable, type DataTableProps, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Dropdown, type DropdownProps, Icon, Input, type InputProps, Label, Loading, Navbar, type NavbarProps, type Options, Popover, PopoverContent, PopoverTrigger, ProgressBar, Search, type SearchProps, Slider, type SliderProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, Text, TextInput, cn, getEndDateOfDay, getStartDateOfDay, getStartEndTimestampOfDay, getTimestampUTC, resloveTimestamp };
+export { ActionButton, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Button, type ButtonProps, Calendar, Checkbox, Collapsible, DataTable, type DataTableProps, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Dropdown, type DropdownProps, Icon, Input, type InputProps, Label, Loading, Navbar, type NavbarProps, type Options, Popover, PopoverContent, PopoverTrigger, ProgressBar, Search, type SearchProps, Slider, type SliderProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, ForwardedText as Text, TextInput, cn, getEndDateOfDay, getStartDateOfDay, getStartEndTimestampOfDay, getTimestampUTC, resloveTimestamp };

package/dist/src/theme/global.css

@@ -217,6 +217,7 @@
   --base-color-bg2: #f5f5f5;
   --base-color-bg3: #d8d8d8;
   --base-color-workspace-stroke: #e2e2e2;
+  --base-color-guideline-stroke: #c5c5c5;
   --base-color-popup: #ffffff;
   --base-color-popup-hightlight: #343638;
   --base-color-popup-curtain: rgba(0 0 0 / 0.6);
@@ -488,6 +489,27 @@
   --small5-style: normal;
   --small5-line-height: 12px;
   --small5-line-height-rem: 0.75rem;
+  --small6-family: "Montserrat";
+  --small6-size: 10px;
+  --small6-size-rem: 0.625rem;
+  --small6-weight: 600;
+  --small6-style: normal;
+  --small6-line-height: 12px;
+  --small6-line-height-rem: 0.75rem;
+  --small7-family: "Montserrat";
+  --small7-size: 8px;
+  --small7-size-rem: 0.5rem;
+  --small7-weight: 600;
+  --small7-style: normal;
+  --small7-line-height: 10px;
+  --small7-line-height-rem: 0.625rem;
+  --small8-family: "Montserrat";
+  --small8-size: 8px;
+  --small8-size-rem: 0.5rem;
+  --small8-weight: 700;
+  --small8-style: normal;
+  --small8-line-height: 10px;
+  --small8-line-height-rem: 0.625rem;
   --label-label1-family: "Montserrat";
   --label-label1-size: 12px;
   --label-label1-size-rem: 0.75rem;
@@ -3738,6 +3760,24 @@ body {
   font-weight: var(--small5-weight, 500);
 }
 
+.text-small6 {
+  font-size: var(--small5-size, 10px);
+  line-height: var(--small6-line-height, 12px);
+  font-weight: var(--small6-weight, 600);
+}
+
+.text-small7 {
+  font-size: var(--small7-size, 8px);
+  line-height: var(--small7-line-height, 10px);
+  font-weight: var(--small7-weight, 600);
+}
+
+.text-small8 {
+  font-size: var(--small8-size, 8px);
+  line-height: var(--small8-line-height, 10px);
+  font-weight: var(--small8-weight, 700);
+}
+
 .text-subtitile1 {
   font-size: var(--subtitle1-size, 16px);
   line-height: var(--subtitle1-line-height, 24px);
@@ -4377,6 +4417,24 @@ body {
   font-weight: var(--small5-weight, 500);
 }
 
+.typography-small6 {
+  font-size: var(--small5-size, 10px);
+  line-height: var(--small6-line-height, 12px);
+  font-weight: var(--small6-weight, 600);
+}
+
+.typography-small7 {
+  font-size: var(--small7-size, 8px);
+  line-height: var(--small7-line-height, 10px);
+  font-weight: var(--small7-weight, 600);
+}
+
+.typography-small8 {
+  font-size: var(--small8-size, 8px);
+  line-height: var(--small8-line-height, 10px);
+  font-weight: var(--small8-weight, 700);
+}
+
 .typography-label1 {
   font-size: var(--label-label1-size, 12px);
   line-height: var(--label-label1-line-height, 12px);

package/dist/theme/main-preset.js

@@ -180,6 +180,30 @@ module.exports = {
             fontFamily: "var(--small5-family, 'Poppins')",
           },
         ],
+        small6: [
+          "var(--small5-size, 10px)",
+          {
+            lineHeight: "var(--small6-line-height, 12px)",
+            fontWeight: "var(--small6-weight, 600)",
+            fontFamily: "var(--small6-family, 'Poppins')",
+          },
+        ],
+        small7: [
+          "var(--small7-size, 8px)",
+          {
+            lineHeight: "var(--small7-line-height, 10px)",
+            fontWeight: "var(--small7-weight, 600)",
+            fontFamily: "var(--small7-family, 'Poppins')",
+          },
+        ],
+        small8: [
+          "var(--small8-size, 8px)",
+          {
+            lineHeight: "var(--small8-line-height, 10px)",
+            fontWeight: "var(--small8-weight, 700)",
+            fontFamily: "var(--small8-family, 'Poppins')",
+          },
+        ],
         label1: [
           "var(--label-label1-size, 12px)",
           {

package/dist/theme/plugins/utilities/typography.js

@@ -65,6 +65,15 @@ module.exports = plugin(function ({ addUtilities }) {
     ".typography-small5": {
       "@apply text-small5": {},
     },
+    ".typography-small6": {
+      "@apply text-small6": {},
+    },
+    ".typography-small7": {
+      "@apply text-small7": {},
+    },
+    ".typography-small8": {
+      "@apply text-small8": {},
+    },
     ".typography-label1": {
       "@apply text-label1": {},
     },

package/dist/theme/presets/colors.js

@@ -81,6 +81,12 @@ module.exports = {
           "--base-color-popup-foreground"
         ),
         "base-stroke": withColorMixin("--base-color-workspace-stroke"),
+        "base-workspace-stroke": withColorMixin(
+          "--base-color-workspace-stroke"
+        ),
+        "base-guideline-stroke": withColorMixin(
+          "--base-color-guideline-stroke"
+        ),
 
         "common-white": withColorMixin("--common-white"),
         "common-black": withColorMixin("--common-black"),

package/dist/theme/tokens/color.css

@@ -23,6 +23,7 @@
   --base-color-bg2: #f5f5f5;
   --base-color-bg3: #d8d8d8;
   --base-color-workspace-stroke: #e2e2e2;
+  --base-color-guideline-stroke: #c5c5c5;
   --base-color-popup: #ffffff;
   --base-color-popup-hightlight: #343638;
   --base-color-popup-curtain: rgba(0 0 0 / 0.6);

package/dist/theme/tokens/typography.css

@@ -147,6 +147,27 @@
   --small5-style: normal;
   --small5-line-height: 12px;
   --small5-line-height-rem: 0.75rem;
+  --small6-family: "Montserrat";
+  --small6-size: 10px;
+  --small6-size-rem: 0.625rem;
+  --small6-weight: 600;
+  --small6-style: normal;
+  --small6-line-height: 12px;
+  --small6-line-height-rem: 0.75rem;
+  --small7-family: "Montserrat";
+  --small7-size: 8px;
+  --small7-size-rem: 0.5rem;
+  --small7-weight: 600;
+  --small7-style: normal;
+  --small7-line-height: 10px;
+  --small7-line-height-rem: 0.625rem;
+  --small8-family: "Montserrat";
+  --small8-size: 8px;
+  --small8-size-rem: 0.5rem;
+  --small8-weight: 700;
+  --small8-style: normal;
+  --small8-line-height: 10px;
+  --small8-line-height-rem: 0.625rem;
   --label-label1-family: "Montserrat";
   --label-label1-size: 12px;
   --label-label1-size-rem: 0.75rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.0.22",
+  "version": "0.0.23",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",

package/src/components/Button/Button.tsx

@@ -1,10 +1,7 @@
-import React, { FC, ReactElement, forwardRef } from "react";
+import React, { ReactElement, forwardRef } from "react";
 import { buttonVariants } from "./Button.styles";
 import { cn } from "@/utils/cn";
-import { title } from "process";
-import { ref } from "yup";
 import Loading from "../Loading/Loading";
-import { EyeIcon } from "@heroicons/react/16/solid";
 
 export type ButtonProps = {
   title?: string;

package/src/components/Collapsible/Collapsible.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, Ref, useEffect, useRef, useState } from "react";
+import React, { forwardRef, useEffect, useRef, useState } from "react";
 import { ChevronDownIcon } from "@heroicons/react/16/solid";
 import { CollapsibleProvider, useCollapsible } from "./CollapsibleContext";
 import { cn } from "@/utils/cn";

package/src/components/Slider/Slider.tsx

@@ -4,7 +4,6 @@ import * as React from "react";
 import * as SliderPrimitive from "@radix-ui/react-slider";
 
 import { cn } from "@/utils/cn";
-import ActionButton from "../ActionButton/ActionButton";
 
 const Slider = React.forwardRef<
   React.ElementRef<typeof SliderPrimitive.Root>,

package/src/components/Tabs/Tabs.tsx

@@ -1,4 +1,4 @@
-"use client";
+("");
 import React, { useState, useRef, useEffect } from "react";
 import { cn } from "@/utils/cn";
 

package/src/components/Text/Text.tsx

@@ -1,8 +1,8 @@
 import { cn } from "@/utils/cn";
-import React, { FC, forwardRef } from "react";
+import React, { forwardRef } from "react";
 import { cva } from "class-variance-authority";
 
-export type TextProps = {
+export type TextProps<T extends React.ElementType> = {
   variant?:
     | "h1"
     | "h2"
@@ -39,10 +39,15 @@ export type TextProps = {
     | "error";
   children?: React.ReactNode;
   className?: string;
-  tag?: keyof JSX.IntrinsicElements;
+  tag?: T;
   style?: React.CSSProperties;
   id?: string;
-};
+} & React.ComponentProps<T>;
+
+type TextComponent<T extends React.ElementType> =
+  React.ForwardRefExoticComponent<
+    TextProps<T> & React.RefAttributes<HTMLElement>
+  >;
 
 const textVariants = cva(["text-foreground"], {
   variants: {
@@ -59,28 +64,36 @@ const textVariants = cva(["text-foreground"], {
 });
 
 // TODO font, fontBold, elipt
-const Text = forwardRef<TextProps["tag"], TextProps>(
-  ({
+const Text = <T extends React.ElementType = "p">(
+  {
     variant = "body1",
     tag: Tag = "p",
     children,
     className = "",
     color,
     style,
-  }) => {
-    return (
-      <Tag
-        className={cn(
-          `typography-${variant}`,
-          textVariants({ color }),
-          className
-        )}
-        style={style}
-      >
-        {children}
-      </Tag>
-    );
-  }
-);
+    ...props
+  }: TextProps<T>,
+  ref: React.Ref<any>
+) => {
+  return (
+    <Tag
+      ref={ref}
+      className={cn(
+        `typography-${variant}`,
+        textVariants({ color }),
+        className
+      )}
+      style={style}
+      {...props}
+    >
+      {children}
+    </Tag>
+  );
+};
+
+const ForwardedText = forwardRef(Text) as TextComponent<any>;
+
+ForwardedText.displayName = "Text";
 
-export default Text;
+export default ForwardedText;

package/src/theme/main-preset.js

@@ -180,6 +180,30 @@ module.exports = {
             fontFamily: "var(--small5-family, 'Poppins')",
           },
         ],
+        small6: [
+          "var(--small5-size, 10px)",
+          {
+            lineHeight: "var(--small6-line-height, 12px)",
+            fontWeight: "var(--small6-weight, 600)",
+            fontFamily: "var(--small6-family, 'Poppins')",
+          },
+        ],
+        small7: [
+          "var(--small7-size, 8px)",
+          {
+            lineHeight: "var(--small7-line-height, 10px)",
+            fontWeight: "var(--small7-weight, 600)",
+            fontFamily: "var(--small7-family, 'Poppins')",
+          },
+        ],
+        small8: [
+          "var(--small8-size, 8px)",
+          {
+            lineHeight: "var(--small8-line-height, 10px)",
+            fontWeight: "var(--small8-weight, 700)",
+            fontFamily: "var(--small8-family, 'Poppins')",
+          },
+        ],
         label1: [
           "var(--label-label1-size, 12px)",
           {

package/src/theme/plugins/utilities/typography.js

@@ -65,6 +65,15 @@ module.exports = plugin(function ({ addUtilities }) {
     ".typography-small5": {
       "@apply text-small5": {},
     },
+    ".typography-small6": {
+      "@apply text-small6": {},
+    },
+    ".typography-small7": {
+      "@apply text-small7": {},
+    },
+    ".typography-small8": {
+      "@apply text-small8": {},
+    },
     ".typography-label1": {
       "@apply text-label1": {},
     },

package/src/theme/presets/colors.js

@@ -81,6 +81,12 @@ module.exports = {
           "--base-color-popup-foreground"
         ),
         "base-stroke": withColorMixin("--base-color-workspace-stroke"),
+        "base-workspace-stroke": withColorMixin(
+          "--base-color-workspace-stroke"
+        ),
+        "base-guideline-stroke": withColorMixin(
+          "--base-color-guideline-stroke"
+        ),
 
         "common-white": withColorMixin("--common-white"),
         "common-black": withColorMixin("--common-black"),

package/src/theme/tokens/color.css

@@ -23,6 +23,7 @@
   --base-color-bg2: #f5f5f5;
   --base-color-bg3: #d8d8d8;
   --base-color-workspace-stroke: #e2e2e2;
+  --base-color-guideline-stroke: #c5c5c5;
   --base-color-popup: #ffffff;
   --base-color-popup-hightlight: #343638;
   --base-color-popup-curtain: rgba(0 0 0 / 0.6);

package/src/theme/tokens/typography.css

@@ -147,6 +147,27 @@
   --small5-style: normal;
   --small5-line-height: 12px;
   --small5-line-height-rem: 0.75rem;
+  --small6-family: "Montserrat";
+  --small6-size: 10px;
+  --small6-size-rem: 0.625rem;
+  --small6-weight: 600;
+  --small6-style: normal;
+  --small6-line-height: 12px;
+  --small6-line-height-rem: 0.75rem;
+  --small7-family: "Montserrat";
+  --small7-size: 8px;
+  --small7-size-rem: 0.5rem;
+  --small7-weight: 600;
+  --small7-style: normal;
+  --small7-line-height: 10px;
+  --small7-line-height-rem: 0.625rem;
+  --small8-family: "Montserrat";
+  --small8-size: 8px;
+  --small8-size-rem: 0.5rem;
+  --small8-weight: 700;
+  --small8-style: normal;
+  --small8-line-height: 10px;
+  --small8-line-height-rem: 0.625rem;
   --label-label1-family: "Montserrat";
   --label-label1-size: 12px;
   --label-label1-size-rem: 0.75rem;