singularity-components 0.1.58 → 0.1.59

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/main.cjs +25 -17
  2. package/dist/main.cjs.map +1 -1
  3. package/dist/main.d.cts +3 -4
  4. package/dist/main.d.ts +3 -4
  5. package/dist/main.js +25 -17
  6. package/dist/main.js.map +1 -1
  7. package/package.json +1 -1
package/dist/main.cjs CHANGED
@@ -235,7 +235,7 @@ var bgColor = {
235
235
  };
236
236
  var layoutVariants = (0, import_class_variance_authority5.cva)("sg-grid sg-grid-cols-1 sg-gap-4", {
237
237
  variants: {
238
- content: {
238
+ type: {
239
239
  full: "sg-w-full sg-px-4",
240
240
  col: "sg-mx-auto sg-max-w-[768px] sg-px-4 md:sg-px-0"
241
241
  },
@@ -249,44 +249,52 @@ var layoutVariants = (0, import_class_variance_authority5.cva)("sg-grid sg-grid-
249
249
  bgcolor: bgColor
250
250
  },
251
251
  defaultVariants: {
252
- content: "col",
252
+ type: "col",
253
253
  cols: "100"
254
254
  }
255
255
  });
256
256
  function Layout({
257
257
  children,
258
258
  className,
259
- content,
259
+ type,
260
260
  cols,
261
- bgcolor
261
+ bgcolor,
262
+ ...props
262
263
  }) {
263
- const allowedInLayout = (content2) => {
264
- if (content2.type === Layout.Col1) {
264
+ const allowedInLayout = (content) => {
265
+ if (content.type === Layout.Col1) {
265
266
  return true;
266
- } else if (content2.type === Layout.Col2 && (cols === "66-33" || cols === "50-50" || cols === "33-33-33" || cols === "25-25-25-25")) {
267
+ } else if (content.type === Layout.Col2 && (cols === "66-33" || cols === "50-50" || cols === "33-33-33" || cols === "25-25-25-25")) {
267
268
  return true;
268
- } else if (content2.type === Layout.Col3 && (cols === "33-33-33" || cols === "25-25-25-25")) {
269
+ } else if (content.type === Layout.Col3 && (cols === "33-33-33" || cols === "25-25-25-25")) {
269
270
  return true;
270
- } else if (content2.type === Layout.Col4 && cols === "25-25-25-25") {
271
+ } else if (content.type === Layout.Col4 && cols === "25-25-25-25") {
271
272
  return true;
272
273
  }
273
274
  console.error(
274
275
  "Content not allowed in column for variant",
275
276
  cols,
276
- content2.type
277
+ content.type
277
278
  );
278
279
  return false;
279
280
  };
280
- const renderColumn = (content2) => {
281
- if (!allowedInLayout(content2)) {
281
+ const renderColumn = (content) => {
282
+ if (!allowedInLayout(content)) {
282
283
  return;
283
284
  }
284
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { children: content2 });
285
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { children: content });
285
286
  };
286
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: cn(bgColor[bgcolor ?? "transparent"], className), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: cn(layoutVariants({ content, cols })), children: React2.Children.map(
287
- children,
288
- (child) => React2.isValidElement(child) ? renderColumn(child) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, {})
289
- ) }) });
287
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
288
+ "div",
289
+ {
290
+ ...props,
291
+ className: cn(bgColor[bgcolor ?? "transparent"], className),
292
+ children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: cn(layoutVariants({ type, cols })), children: React2.Children.map(
293
+ children,
294
+ (child) => React2.isValidElement(child) ? renderColumn(child) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, {})
295
+ ) })
296
+ }
297
+ );
290
298
  }
291
299
  function Col1({ children }) {
292
300
  return children;
package/dist/main.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../lib/main.ts","../lib/components/ui/heading/heading.tsx","../lib/utils.ts","../lib/components/ui/text/text.tsx","../lib/components/ui/button/button.tsx","../lib/components/ui/badge/badge.tsx","../lib/components/ui/layout/layout.tsx"],"sourcesContent":["import \"./tailwind.css\";\n\nexport * from \"./components\";\n","import React from \"react\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { cn } from \"../../../utils\";\r\nimport { OmitClassProperty, TailwindMarginClass } from \"../../../lib/types\";\r\n\r\nconst headingVariants = cva(\"\", {\r\n variants: {\r\n variant: {\r\n h1: \"sg-text-4xl sg-font-extrabold sg-tracking-tight lg:sg-text-5xl\",\r\n h2: \"sg-text-3xl sg-font-semibold sg-tracking-tight sg-transition-colors first:sg-mt-0\",\r\n h3: \"sg-text-2xl sg-font-semibold sg-tracking-tight\",\r\n h4: \"sg-text-xl sg-font-semibold sg-tracking-tight\",\r\n },\r\n foreground: {\r\n default: \"sg-text-foreground\",\r\n muted: \"sg-text-muted-foreground\",\r\n primary: \"sg-text-primary\",\r\n },\r\n },\r\n defaultVariants: {\r\n variant: \"h2\",\r\n foreground: \"default\",\r\n },\r\n});\r\n\r\nexport interface HeadingProps\r\n extends OmitClassProperty<\r\n React.HTMLAttributes<HTMLHeadingElement>,\r\n \"className\"\r\n >,\r\n VariantProps<typeof headingVariants> {\r\n as?: \"h1\" | \"h2\" | \"h3\" | \"h4\";\r\n className?: TailwindMarginClass;\r\n}\r\n\r\nexport const Heading: React.FC<HeadingProps> = ({\r\n children,\r\n as,\r\n variant,\r\n foreground,\r\n className,\r\n ...props\r\n}) => {\r\n if (!as && variant) {\r\n as = variant;\r\n } else if (!as) {\r\n as = \"h2\";\r\n }\r\n const Component = as;\r\n\r\n return (\r\n <Component\r\n className={cn(headingVariants({ variant, foreground, className }))}\r\n {...props}\r\n >\r\n {children}\r\n </Component>\r\n );\r\n};\r\n","import { clsx, type ClassValue } from \"clsx\";\r\nimport { extendTailwindMerge, twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n const twMergeWithPrefix = extendTailwindMerge({\r\n prefix: \"sg-\",\r\n });\r\n\r\n return twMergeWithPrefix(twMerge(clsx(inputs)));\r\n}\r\n","import React from \"react\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { cn } from \"../../../utils\";\r\nimport { OmitClassProperty, TailwindMarginClass } from \"../../../lib/types\";\r\n\r\nconst textVariants = cva(\"\", {\r\n variants: {\r\n size: {\r\n xs: \"sg-text-xs\",\r\n sm: \"sg-text-sm\",\r\n base: \"sg-text-base\",\r\n lg: \"sg-text-lg\",\r\n xl: \"sg-text-xl\",\r\n },\r\n foreground: {\r\n default: \"sg-text-foreground\",\r\n muted: \"sg-text-muted-foreground\",\r\n primary: \"sg-text-primary\",\r\n secondary: \"sg-text-secondary-foreground\",\r\n destructive: \"sg-text-destructive\",\r\n accent: \"sg-text-accent-foreground\",\r\n },\r\n weight: {\r\n normal: \"sg-font-normal\",\r\n medium: \"sg-font-medium\",\r\n semibold: \"sg-font-semibold\",\r\n bold: \"sg-font-bold\",\r\n },\r\n },\r\n defaultVariants: {\r\n size: \"base\",\r\n foreground: \"default\",\r\n weight: \"normal\",\r\n },\r\n});\r\n\r\nexport interface TextProps\r\n extends OmitClassProperty<React.HTMLAttributes<HTMLDivElement>, \"className\">,\r\n VariantProps<typeof textVariants> {\r\n className?: TailwindMarginClass;\r\n}\r\n\r\nexport const Text: React.FC<TextProps> = ({\r\n children,\r\n size,\r\n foreground,\r\n weight,\r\n className,\r\n ...props\r\n}) => {\r\n return (\r\n <p\r\n className={cn(\r\n textVariants({\r\n size,\r\n foreground,\r\n weight,\r\n className,\r\n })\r\n )}\r\n {...props}\r\n >\r\n {children}\r\n </p>\r\n );\r\n};\r\n","import * as React from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../../utils\";\nimport { OmitClassProperty, TailwindMarginClass } from \"../../../lib/types\";\n\nconst buttonVariants = cva(\n \"sg-inline-flex sg-items-center sg-justify-center sg-gap-2 sg-whitespace-nowrap sg-rounded-md sg-text-sm sg-font-medium sg-transition-colors focus-visible:sg-outline-none focus-visible:ring-offset-2 focus-visible:sg-ring-2 focus-visible:sg-ring-ring disabled:sg-pointer-events-none disabled:sg-opacity-50 [&_svg]:sg-pointer-events-none [&_svg]:sg-size-4 [&_svg]:sg-shrink-0\",\n {\n variants: {\n variant: {\n primary:\n \"sg-bg-orange sg-text-orange-foreground sg-shadow hover:sg-bg-orange/90\",\n secondary:\n \"sg-bg-purple sg-text-purple-foreground sg-shadow-sm hover:sg-bg-purple/90\",\n destructive:\n \"sg-bg-red sg-text-red-foreground sg-shadow-sm hover:sg-bg-red/90\",\n outline:\n \"sg-border sg-border-orange sg-bg-white sg-shadow-sm hover:sg-bg-gray/20\",\n ghost: \"hover:sg-bg-accent hover:sg-text-accent-foreground\",\n link: \"sg-text-primary sg-underline-offset-4 hover:sg-underline\",\n },\n size: {\n default: \"sg-h-9 sg-px-4 sg-py-2\",\n sm: \"sg-h-8 sg-rounded-md sg-px-3 sg-text-xs\",\n lg: \"sg-h-10 sg-rounded-md sg-px-8\",\n icon: \"sg-h-9 sg-w-9\",\n },\n },\n defaultVariants: {\n variant: \"primary\",\n size: \"default\",\n },\n }\n);\n\nexport interface ButtonProps\n extends OmitClassProperty<\n React.ButtonHTMLAttributes<HTMLButtonElement>,\n \"className\"\n >,\n VariantProps<typeof buttonVariants> {\n asChild?: boolean;\n className?: TailwindMarginClass;\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n ({ className, variant, size, asChild = false, ...props }, ref) => {\n const Comp = asChild ? Slot : \"button\";\n return (\n <Comp\n className={cn(buttonVariants({ variant, size, className }))}\n ref={ref}\n {...props}\n />\n );\n }\n);\nButton.displayName = \"Button\";\n\nexport { Button, buttonVariants };\n","import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../../utils\";\nimport { OmitClassProperty, TailwindMarginClass } from \"../../../lib/types\";\n\nconst badgeVariants = cva(\n \"sg-inline-flex sg-items-center sg-rounded-md sg-border sg-px-2.5 sg-py-0.5 sg-text-xs sg-font-semibold sg-transition-colors focus:sg-outline-none focus:sg-ring-2 focus:sg-ring-ring focus:sg-ring-offset-2\",\n {\n variants: {\n variant: {\n default:\n \"sg-border-transparent sg-bg-orange sg-text-orange-foreground sg-shadow hover:sg-bg-orange/80\",\n purple:\n \"sg-border-transparent sg-bg-purple sg-text-purple-foreground sg-shadow hover:sg-bg-purple/80\",\n green:\n \"sg-border-transparent sg-bg-green sg-text-green-foreground sg-shadow hover:sg-bg-green/80\",\n outline: \"sg-text-foreground\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n);\n\nexport interface BadgeProps\n extends OmitClassProperty<React.HTMLAttributes<HTMLDivElement>, \"className\">,\n VariantProps<typeof badgeVariants> {\n className?: TailwindMarginClass;\n}\n\nfunction Badge({ className, variant, ...props }: BadgeProps) {\n return (\n <div className={cn(badgeVariants({ variant }), className)} {...props} />\n );\n}\n\nexport { Badge, badgeVariants };\n","import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../../utils\";\nimport { PropsWithChildren } from \"react\";\n\nconst bgColor = {\n transparent: \"sg-bg-transparent\",\n white: \"sg-bg-white\",\n black: \"sg-bg-black\",\n orange: \"sg-bg-orange\",\n purple: \"sg-bg-purple\",\n};\n\nconst layoutVariants = cva(\"sg-grid sg-grid-cols-1 sg-gap-4\", {\n variants: {\n content: {\n full: \"sg-w-full sg-px-4\",\n col: \"sg-mx-auto sg-max-w-[768px] sg-px-4 md:sg-px-0\",\n },\n cols: {\n \"100\": \"\",\n \"66-33\": \"md:sg-grid-cols-2\",\n \"50-50\": \"md:sg-grid-cols-2\",\n \"33-33-33\": \"md:sg-grid-cols-3\",\n \"25-25-25-25\": \"md:sg-grid-cols-4\",\n },\n bgcolor: bgColor,\n },\n defaultVariants: {\n content: \"col\",\n cols: \"100\",\n },\n});\n\nexport interface LayoutProps extends VariantProps<typeof layoutVariants> {\n className?: React.HTMLAttributes<HTMLDivElement>;\n}\n\nfunction Layout({\n children,\n className,\n content,\n cols,\n bgcolor,\n}: PropsWithChildren<LayoutProps>) {\n const allowedInLayout = (\n content: React.ReactElement<any, string | React.JSXElementConstructor<any>>\n ): boolean => {\n if (content.type === Layout.Col1) {\n return true;\n } else if (\n content.type === Layout.Col2 &&\n (cols === \"66-33\" ||\n cols === \"50-50\" ||\n cols === \"33-33-33\" ||\n cols === \"25-25-25-25\")\n ) {\n return true;\n } else if (\n content.type === Layout.Col3 &&\n (cols === \"33-33-33\" || cols === \"25-25-25-25\")\n ) {\n return true;\n } else if (content.type === Layout.Col4 && cols === \"25-25-25-25\") {\n return true;\n }\n\n console.error(\n \"Content not allowed in column for variant\",\n cols,\n content.type\n );\n return false;\n };\n\n const renderColumn = (\n content: React.ReactElement<any, string | React.JSXElementConstructor<any>>\n ) => {\n if (!allowedInLayout(content)) {\n return;\n }\n return <div>{content}</div>;\n };\n\n return (\n <div className={cn(bgColor[bgcolor ?? \"transparent\"], className)}>\n <div className={cn(layoutVariants({ content, cols }))}>\n {React.Children.map(children, (child) =>\n React.isValidElement(child) ? renderColumn(child) : <></>\n )}\n </div>\n </div>\n );\n}\n\ntype colProp = {\n children?: React.ReactNode;\n};\n\nfunction Col1({ children }: colProp) {\n return children;\n}\nfunction Col2({ children }: colProp) {\n return children;\n}\nfunction Col3({ children }: colProp) {\n return children;\n}\nfunction Col4({ children }: colProp) {\n return children;\n}\n\nLayout.Col1 = Col1;\nLayout.Col2 = Col2;\nLayout.Col3 = Col3;\nLayout.Col4 = Col4;\n\nexport { Layout, layoutVariants };\n"],"mappings":"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","names":["import_class_variance_authority","import_jsx_runtime","import_class_variance_authority","import_jsx_runtime","import_class_variance_authority","import_jsx_runtime","React","import_class_variance_authority","import_jsx_runtime","content"]}
1
+ {"version":3,"sources":["../lib/main.ts","../lib/components/ui/heading/heading.tsx","../lib/utils.ts","../lib/components/ui/text/text.tsx","../lib/components/ui/button/button.tsx","../lib/components/ui/badge/badge.tsx","../lib/components/ui/layout/layout.tsx"],"sourcesContent":["import \"./tailwind.css\";\n\nexport * from \"./components\";\n","import React from \"react\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { cn } from \"../../../utils\";\r\nimport { OmitClassProperty, TailwindMarginClass } from \"../../../lib/types\";\r\n\r\nconst headingVariants = cva(\"\", {\r\n variants: {\r\n variant: {\r\n h1: \"sg-text-4xl sg-font-extrabold sg-tracking-tight lg:sg-text-5xl\",\r\n h2: \"sg-text-3xl sg-font-semibold sg-tracking-tight sg-transition-colors first:sg-mt-0\",\r\n h3: \"sg-text-2xl sg-font-semibold sg-tracking-tight\",\r\n h4: \"sg-text-xl sg-font-semibold sg-tracking-tight\",\r\n },\r\n foreground: {\r\n default: \"sg-text-foreground\",\r\n muted: \"sg-text-muted-foreground\",\r\n primary: \"sg-text-primary\",\r\n },\r\n },\r\n defaultVariants: {\r\n variant: \"h2\",\r\n foreground: \"default\",\r\n },\r\n});\r\n\r\nexport interface HeadingProps\r\n extends OmitClassProperty<\r\n React.HTMLAttributes<HTMLHeadingElement>,\r\n \"className\"\r\n >,\r\n VariantProps<typeof headingVariants> {\r\n as?: \"h1\" | \"h2\" | \"h3\" | \"h4\";\r\n className?: TailwindMarginClass;\r\n}\r\n\r\nexport const Heading: React.FC<HeadingProps> = ({\r\n children,\r\n as,\r\n variant,\r\n foreground,\r\n className,\r\n ...props\r\n}) => {\r\n if (!as && variant) {\r\n as = variant;\r\n } else if (!as) {\r\n as = \"h2\";\r\n }\r\n const Component = as;\r\n\r\n return (\r\n <Component\r\n className={cn(headingVariants({ variant, foreground, className }))}\r\n {...props}\r\n >\r\n {children}\r\n </Component>\r\n );\r\n};\r\n","import { clsx, type ClassValue } from \"clsx\";\r\nimport { extendTailwindMerge, twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n const twMergeWithPrefix = extendTailwindMerge({\r\n prefix: \"sg-\",\r\n });\r\n\r\n return twMergeWithPrefix(twMerge(clsx(inputs)));\r\n}\r\n","import React from \"react\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { cn } from \"../../../utils\";\r\nimport { OmitClassProperty, TailwindMarginClass } from \"../../../lib/types\";\r\n\r\nconst textVariants = cva(\"\", {\r\n variants: {\r\n size: {\r\n xs: \"sg-text-xs\",\r\n sm: \"sg-text-sm\",\r\n base: \"sg-text-base\",\r\n lg: \"sg-text-lg\",\r\n xl: \"sg-text-xl\",\r\n },\r\n foreground: {\r\n default: \"sg-text-foreground\",\r\n muted: \"sg-text-muted-foreground\",\r\n primary: \"sg-text-primary\",\r\n secondary: \"sg-text-secondary-foreground\",\r\n destructive: \"sg-text-destructive\",\r\n accent: \"sg-text-accent-foreground\",\r\n },\r\n weight: {\r\n normal: \"sg-font-normal\",\r\n medium: \"sg-font-medium\",\r\n semibold: \"sg-font-semibold\",\r\n bold: \"sg-font-bold\",\r\n },\r\n },\r\n defaultVariants: {\r\n size: \"base\",\r\n foreground: \"default\",\r\n weight: \"normal\",\r\n },\r\n});\r\n\r\nexport interface TextProps\r\n extends OmitClassProperty<React.HTMLAttributes<HTMLDivElement>, \"className\">,\r\n VariantProps<typeof textVariants> {\r\n className?: TailwindMarginClass;\r\n}\r\n\r\nexport const Text: React.FC<TextProps> = ({\r\n children,\r\n size,\r\n foreground,\r\n weight,\r\n className,\r\n ...props\r\n}) => {\r\n return (\r\n <p\r\n className={cn(\r\n textVariants({\r\n size,\r\n foreground,\r\n weight,\r\n className,\r\n })\r\n )}\r\n {...props}\r\n >\r\n {children}\r\n </p>\r\n );\r\n};\r\n","import * as React from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../../utils\";\nimport { OmitClassProperty, TailwindMarginClass } from \"../../../lib/types\";\n\nconst buttonVariants = cva(\n \"sg-inline-flex sg-items-center sg-justify-center sg-gap-2 sg-whitespace-nowrap sg-rounded-md sg-text-sm sg-font-medium sg-transition-colors focus-visible:sg-outline-none focus-visible:ring-offset-2 focus-visible:sg-ring-2 focus-visible:sg-ring-ring disabled:sg-pointer-events-none disabled:sg-opacity-50 [&_svg]:sg-pointer-events-none [&_svg]:sg-size-4 [&_svg]:sg-shrink-0\",\n {\n variants: {\n variant: {\n primary:\n \"sg-bg-orange sg-text-orange-foreground sg-shadow hover:sg-bg-orange/90\",\n secondary:\n \"sg-bg-purple sg-text-purple-foreground sg-shadow-sm hover:sg-bg-purple/90\",\n destructive:\n \"sg-bg-red sg-text-red-foreground sg-shadow-sm hover:sg-bg-red/90\",\n outline:\n \"sg-border sg-border-orange sg-bg-white sg-shadow-sm hover:sg-bg-gray/20\",\n ghost: \"hover:sg-bg-accent hover:sg-text-accent-foreground\",\n link: \"sg-text-primary sg-underline-offset-4 hover:sg-underline\",\n },\n size: {\n default: \"sg-h-9 sg-px-4 sg-py-2\",\n sm: \"sg-h-8 sg-rounded-md sg-px-3 sg-text-xs\",\n lg: \"sg-h-10 sg-rounded-md sg-px-8\",\n icon: \"sg-h-9 sg-w-9\",\n },\n },\n defaultVariants: {\n variant: \"primary\",\n size: \"default\",\n },\n }\n);\n\nexport interface ButtonProps\n extends OmitClassProperty<\n React.ButtonHTMLAttributes<HTMLButtonElement>,\n \"className\"\n >,\n VariantProps<typeof buttonVariants> {\n asChild?: boolean;\n className?: TailwindMarginClass;\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n ({ className, variant, size, asChild = false, ...props }, ref) => {\n const Comp = asChild ? Slot : \"button\";\n return (\n <Comp\n className={cn(buttonVariants({ variant, size, className }))}\n ref={ref}\n {...props}\n />\n );\n }\n);\nButton.displayName = \"Button\";\n\nexport { Button, buttonVariants };\n","import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../../utils\";\nimport { OmitClassProperty, TailwindMarginClass } from \"../../../lib/types\";\n\nconst badgeVariants = cva(\n \"sg-inline-flex sg-items-center sg-rounded-md sg-border sg-px-2.5 sg-py-0.5 sg-text-xs sg-font-semibold sg-transition-colors focus:sg-outline-none focus:sg-ring-2 focus:sg-ring-ring focus:sg-ring-offset-2\",\n {\n variants: {\n variant: {\n default:\n \"sg-border-transparent sg-bg-orange sg-text-orange-foreground sg-shadow hover:sg-bg-orange/80\",\n purple:\n \"sg-border-transparent sg-bg-purple sg-text-purple-foreground sg-shadow hover:sg-bg-purple/80\",\n green:\n \"sg-border-transparent sg-bg-green sg-text-green-foreground sg-shadow hover:sg-bg-green/80\",\n outline: \"sg-text-foreground\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n);\n\nexport interface BadgeProps\n extends OmitClassProperty<React.HTMLAttributes<HTMLDivElement>, \"className\">,\n VariantProps<typeof badgeVariants> {\n className?: TailwindMarginClass;\n}\n\nfunction Badge({ className, variant, ...props }: BadgeProps) {\n return (\n <div className={cn(badgeVariants({ variant }), className)} {...props} />\n );\n}\n\nexport { Badge, badgeVariants };\n","import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../../utils\";\nimport { PropsWithChildren } from \"react\";\n\nconst bgColor = {\n transparent: \"sg-bg-transparent\",\n white: \"sg-bg-white\",\n black: \"sg-bg-black\",\n orange: \"sg-bg-orange\",\n purple: \"sg-bg-purple\",\n};\n\nconst layoutVariants = cva(\"sg-grid sg-grid-cols-1 sg-gap-4\", {\n variants: {\n type: {\n full: \"sg-w-full sg-px-4\",\n col: \"sg-mx-auto sg-max-w-[768px] sg-px-4 md:sg-px-0\",\n },\n cols: {\n \"100\": \"\",\n \"66-33\": \"md:sg-grid-cols-2\",\n \"50-50\": \"md:sg-grid-cols-2\",\n \"33-33-33\": \"md:sg-grid-cols-3\",\n \"25-25-25-25\": \"md:sg-grid-cols-4\",\n },\n bgcolor: bgColor,\n },\n defaultVariants: {\n type: \"col\",\n cols: \"100\",\n },\n});\n\nexport interface LayoutProps\n extends React.HTMLAttributes<HTMLDivElement>,\n VariantProps<typeof layoutVariants> {}\n\nfunction Layout({\n children,\n className,\n type,\n cols,\n bgcolor,\n ...props\n}: PropsWithChildren<LayoutProps>) {\n const allowedInLayout = (\n content: React.ReactElement<any, string | React.JSXElementConstructor<any>>\n ): boolean => {\n if (content.type === Layout.Col1) {\n return true;\n } else if (\n content.type === Layout.Col2 &&\n (cols === \"66-33\" ||\n cols === \"50-50\" ||\n cols === \"33-33-33\" ||\n cols === \"25-25-25-25\")\n ) {\n return true;\n } else if (\n content.type === Layout.Col3 &&\n (cols === \"33-33-33\" || cols === \"25-25-25-25\")\n ) {\n return true;\n } else if (content.type === Layout.Col4 && cols === \"25-25-25-25\") {\n return true;\n }\n\n console.error(\n \"Content not allowed in column for variant\",\n cols,\n content.type\n );\n return false;\n };\n\n const renderColumn = (\n content: React.ReactElement<any, string | React.JSXElementConstructor<any>>\n ) => {\n if (!allowedInLayout(content)) {\n return;\n }\n return <div>{content}</div>;\n };\n\n return (\n <div\n {...props}\n className={cn(bgColor[bgcolor ?? \"transparent\"], className)}\n >\n <div className={cn(layoutVariants({ type, cols }))}>\n {React.Children.map(children, (child) =>\n React.isValidElement(child) ? renderColumn(child) : <></>\n )}\n </div>\n </div>\n );\n}\n\ntype colProp = {\n children?: React.ReactNode;\n};\n\nfunction Col1({ children }: colProp) {\n return children;\n}\nfunction Col2({ children }: colProp) {\n return children;\n}\nfunction Col3({ children }: colProp) {\n return children;\n}\nfunction Col4({ children }: colProp) {\n return children;\n}\n\nLayout.Col1 = Col1;\nLayout.Col2 = Col2;\nLayout.Col3 = Col3;\nLayout.Col4 = Col4;\n\nexport { Layout, layoutVariants };\n"],"mappings":"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","names":["import_class_variance_authority","import_jsx_runtime","import_class_variance_authority","import_jsx_runtime","import_class_variance_authority","import_jsx_runtime","React","import_class_variance_authority","import_jsx_runtime"]}
package/dist/main.d.cts CHANGED
@@ -49,14 +49,13 @@ interface BadgeProps extends OmitClassProperty<React.HTMLAttributes<HTMLDivEleme
49
49
  declare function Badge({ className, variant, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
50
50
 
51
51
  declare const layoutVariants: (props?: ({
52
- content?: "full" | "col" | null | undefined;
52
+ type?: "full" | "col" | null | undefined;
53
53
  cols?: "100" | "66-33" | "50-50" | "33-33-33" | "25-25-25-25" | null | undefined;
54
54
  bgcolor?: "purple" | "transparent" | "white" | "black" | "orange" | null | undefined;
55
55
  } & class_variance_authority_types.ClassProp) | undefined) => string;
56
- interface LayoutProps extends VariantProps<typeof layoutVariants> {
57
- className?: React.HTMLAttributes<HTMLDivElement>;
56
+ interface LayoutProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof layoutVariants> {
58
57
  }
59
- declare function Layout({ children, className, content, cols, bgcolor, }: PropsWithChildren<LayoutProps>): react_jsx_runtime.JSX.Element;
58
+ declare function Layout({ children, className, type, cols, bgcolor, ...props }: PropsWithChildren<LayoutProps>): react_jsx_runtime.JSX.Element;
60
59
  declare namespace Layout {
61
60
  var Col1: ({ children }: colProp) => React.ReactNode;
62
61
  var Col2: ({ children }: colProp) => React.ReactNode;
package/dist/main.d.ts CHANGED
@@ -49,14 +49,13 @@ interface BadgeProps extends OmitClassProperty<React.HTMLAttributes<HTMLDivEleme
49
49
  declare function Badge({ className, variant, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
50
50
 
51
51
  declare const layoutVariants: (props?: ({
52
- content?: "full" | "col" | null | undefined;
52
+ type?: "full" | "col" | null | undefined;
53
53
  cols?: "100" | "66-33" | "50-50" | "33-33-33" | "25-25-25-25" | null | undefined;
54
54
  bgcolor?: "purple" | "transparent" | "white" | "black" | "orange" | null | undefined;
55
55
  } & class_variance_authority_types.ClassProp) | undefined) => string;
56
- interface LayoutProps extends VariantProps<typeof layoutVariants> {
57
- className?: React.HTMLAttributes<HTMLDivElement>;
56
+ interface LayoutProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof layoutVariants> {
58
57
  }
59
- declare function Layout({ children, className, content, cols, bgcolor, }: PropsWithChildren<LayoutProps>): react_jsx_runtime.JSX.Element;
58
+ declare function Layout({ children, className, type, cols, bgcolor, ...props }: PropsWithChildren<LayoutProps>): react_jsx_runtime.JSX.Element;
60
59
  declare namespace Layout {
61
60
  var Col1: ({ children }: colProp) => React.ReactNode;
62
61
  var Col2: ({ children }: colProp) => React.ReactNode;
package/dist/main.js CHANGED
@@ -195,7 +195,7 @@ var bgColor = {
195
195
  };
196
196
  var layoutVariants = cva5("sg-grid sg-grid-cols-1 sg-gap-4", {
197
197
  variants: {
198
- content: {
198
+ type: {
199
199
  full: "sg-w-full sg-px-4",
200
200
  col: "sg-mx-auto sg-max-w-[768px] sg-px-4 md:sg-px-0"
201
201
  },
@@ -209,44 +209,52 @@ var layoutVariants = cva5("sg-grid sg-grid-cols-1 sg-gap-4", {
209
209
  bgcolor: bgColor
210
210
  },
211
211
  defaultVariants: {
212
- content: "col",
212
+ type: "col",
213
213
  cols: "100"
214
214
  }
215
215
  });
216
216
  function Layout({
217
217
  children,
218
218
  className,
219
- content,
219
+ type,
220
220
  cols,
221
- bgcolor
221
+ bgcolor,
222
+ ...props
222
223
  }) {
223
- const allowedInLayout = (content2) => {
224
- if (content2.type === Layout.Col1) {
224
+ const allowedInLayout = (content) => {
225
+ if (content.type === Layout.Col1) {
225
226
  return true;
226
- } else if (content2.type === Layout.Col2 && (cols === "66-33" || cols === "50-50" || cols === "33-33-33" || cols === "25-25-25-25")) {
227
+ } else if (content.type === Layout.Col2 && (cols === "66-33" || cols === "50-50" || cols === "33-33-33" || cols === "25-25-25-25")) {
227
228
  return true;
228
- } else if (content2.type === Layout.Col3 && (cols === "33-33-33" || cols === "25-25-25-25")) {
229
+ } else if (content.type === Layout.Col3 && (cols === "33-33-33" || cols === "25-25-25-25")) {
229
230
  return true;
230
- } else if (content2.type === Layout.Col4 && cols === "25-25-25-25") {
231
+ } else if (content.type === Layout.Col4 && cols === "25-25-25-25") {
231
232
  return true;
232
233
  }
233
234
  console.error(
234
235
  "Content not allowed in column for variant",
235
236
  cols,
236
- content2.type
237
+ content.type
237
238
  );
238
239
  return false;
239
240
  };
240
- const renderColumn = (content2) => {
241
- if (!allowedInLayout(content2)) {
241
+ const renderColumn = (content) => {
242
+ if (!allowedInLayout(content)) {
242
243
  return;
243
244
  }
244
- return /* @__PURE__ */ jsx5("div", { children: content2 });
245
+ return /* @__PURE__ */ jsx5("div", { children: content });
245
246
  };
246
- return /* @__PURE__ */ jsx5("div", { className: cn(bgColor[bgcolor ?? "transparent"], className), children: /* @__PURE__ */ jsx5("div", { className: cn(layoutVariants({ content, cols })), children: React2.Children.map(
247
- children,
248
- (child) => React2.isValidElement(child) ? renderColumn(child) : /* @__PURE__ */ jsx5(Fragment, {})
249
- ) }) });
247
+ return /* @__PURE__ */ jsx5(
248
+ "div",
249
+ {
250
+ ...props,
251
+ className: cn(bgColor[bgcolor ?? "transparent"], className),
252
+ children: /* @__PURE__ */ jsx5("div", { className: cn(layoutVariants({ type, cols })), children: React2.Children.map(
253
+ children,
254
+ (child) => React2.isValidElement(child) ? renderColumn(child) : /* @__PURE__ */ jsx5(Fragment, {})
255
+ ) })
256
+ }
257
+ );
250
258
  }
251
259
  function Col1({ children }) {
252
260
  return children;
package/dist/main.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../lib/components/ui/heading/heading.tsx","../lib/utils.ts","../lib/components/ui/text/text.tsx","../lib/components/ui/button/button.tsx","../lib/components/ui/badge/badge.tsx","../lib/components/ui/layout/layout.tsx"],"sourcesContent":["import React from \"react\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { cn } from \"../../../utils\";\r\nimport { OmitClassProperty, TailwindMarginClass } from \"../../../lib/types\";\r\n\r\nconst headingVariants = cva(\"\", {\r\n variants: {\r\n variant: {\r\n h1: \"sg-text-4xl sg-font-extrabold sg-tracking-tight lg:sg-text-5xl\",\r\n h2: \"sg-text-3xl sg-font-semibold sg-tracking-tight sg-transition-colors first:sg-mt-0\",\r\n h3: \"sg-text-2xl sg-font-semibold sg-tracking-tight\",\r\n h4: \"sg-text-xl sg-font-semibold sg-tracking-tight\",\r\n },\r\n foreground: {\r\n default: \"sg-text-foreground\",\r\n muted: \"sg-text-muted-foreground\",\r\n primary: \"sg-text-primary\",\r\n },\r\n },\r\n defaultVariants: {\r\n variant: \"h2\",\r\n foreground: \"default\",\r\n },\r\n});\r\n\r\nexport interface HeadingProps\r\n extends OmitClassProperty<\r\n React.HTMLAttributes<HTMLHeadingElement>,\r\n \"className\"\r\n >,\r\n VariantProps<typeof headingVariants> {\r\n as?: \"h1\" | \"h2\" | \"h3\" | \"h4\";\r\n className?: TailwindMarginClass;\r\n}\r\n\r\nexport const Heading: React.FC<HeadingProps> = ({\r\n children,\r\n as,\r\n variant,\r\n foreground,\r\n className,\r\n ...props\r\n}) => {\r\n if (!as && variant) {\r\n as = variant;\r\n } else if (!as) {\r\n as = \"h2\";\r\n }\r\n const Component = as;\r\n\r\n return (\r\n <Component\r\n className={cn(headingVariants({ variant, foreground, className }))}\r\n {...props}\r\n >\r\n {children}\r\n </Component>\r\n );\r\n};\r\n","import { clsx, type ClassValue } from \"clsx\";\r\nimport { extendTailwindMerge, twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n const twMergeWithPrefix = extendTailwindMerge({\r\n prefix: \"sg-\",\r\n });\r\n\r\n return twMergeWithPrefix(twMerge(clsx(inputs)));\r\n}\r\n","import React from \"react\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { cn } from \"../../../utils\";\r\nimport { OmitClassProperty, TailwindMarginClass } from \"../../../lib/types\";\r\n\r\nconst textVariants = cva(\"\", {\r\n variants: {\r\n size: {\r\n xs: \"sg-text-xs\",\r\n sm: \"sg-text-sm\",\r\n base: \"sg-text-base\",\r\n lg: \"sg-text-lg\",\r\n xl: \"sg-text-xl\",\r\n },\r\n foreground: {\r\n default: \"sg-text-foreground\",\r\n muted: \"sg-text-muted-foreground\",\r\n primary: \"sg-text-primary\",\r\n secondary: \"sg-text-secondary-foreground\",\r\n destructive: \"sg-text-destructive\",\r\n accent: \"sg-text-accent-foreground\",\r\n },\r\n weight: {\r\n normal: \"sg-font-normal\",\r\n medium: \"sg-font-medium\",\r\n semibold: \"sg-font-semibold\",\r\n bold: \"sg-font-bold\",\r\n },\r\n },\r\n defaultVariants: {\r\n size: \"base\",\r\n foreground: \"default\",\r\n weight: \"normal\",\r\n },\r\n});\r\n\r\nexport interface TextProps\r\n extends OmitClassProperty<React.HTMLAttributes<HTMLDivElement>, \"className\">,\r\n VariantProps<typeof textVariants> {\r\n className?: TailwindMarginClass;\r\n}\r\n\r\nexport const Text: React.FC<TextProps> = ({\r\n children,\r\n size,\r\n foreground,\r\n weight,\r\n className,\r\n ...props\r\n}) => {\r\n return (\r\n <p\r\n className={cn(\r\n textVariants({\r\n size,\r\n foreground,\r\n weight,\r\n className,\r\n })\r\n )}\r\n {...props}\r\n >\r\n {children}\r\n </p>\r\n );\r\n};\r\n","import * as React from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../../utils\";\nimport { OmitClassProperty, TailwindMarginClass } from \"../../../lib/types\";\n\nconst buttonVariants = cva(\n \"sg-inline-flex sg-items-center sg-justify-center sg-gap-2 sg-whitespace-nowrap sg-rounded-md sg-text-sm sg-font-medium sg-transition-colors focus-visible:sg-outline-none focus-visible:ring-offset-2 focus-visible:sg-ring-2 focus-visible:sg-ring-ring disabled:sg-pointer-events-none disabled:sg-opacity-50 [&_svg]:sg-pointer-events-none [&_svg]:sg-size-4 [&_svg]:sg-shrink-0\",\n {\n variants: {\n variant: {\n primary:\n \"sg-bg-orange sg-text-orange-foreground sg-shadow hover:sg-bg-orange/90\",\n secondary:\n \"sg-bg-purple sg-text-purple-foreground sg-shadow-sm hover:sg-bg-purple/90\",\n destructive:\n \"sg-bg-red sg-text-red-foreground sg-shadow-sm hover:sg-bg-red/90\",\n outline:\n \"sg-border sg-border-orange sg-bg-white sg-shadow-sm hover:sg-bg-gray/20\",\n ghost: \"hover:sg-bg-accent hover:sg-text-accent-foreground\",\n link: \"sg-text-primary sg-underline-offset-4 hover:sg-underline\",\n },\n size: {\n default: \"sg-h-9 sg-px-4 sg-py-2\",\n sm: \"sg-h-8 sg-rounded-md sg-px-3 sg-text-xs\",\n lg: \"sg-h-10 sg-rounded-md sg-px-8\",\n icon: \"sg-h-9 sg-w-9\",\n },\n },\n defaultVariants: {\n variant: \"primary\",\n size: \"default\",\n },\n }\n);\n\nexport interface ButtonProps\n extends OmitClassProperty<\n React.ButtonHTMLAttributes<HTMLButtonElement>,\n \"className\"\n >,\n VariantProps<typeof buttonVariants> {\n asChild?: boolean;\n className?: TailwindMarginClass;\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n ({ className, variant, size, asChild = false, ...props }, ref) => {\n const Comp = asChild ? Slot : \"button\";\n return (\n <Comp\n className={cn(buttonVariants({ variant, size, className }))}\n ref={ref}\n {...props}\n />\n );\n }\n);\nButton.displayName = \"Button\";\n\nexport { Button, buttonVariants };\n","import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../../utils\";\nimport { OmitClassProperty, TailwindMarginClass } from \"../../../lib/types\";\n\nconst badgeVariants = cva(\n \"sg-inline-flex sg-items-center sg-rounded-md sg-border sg-px-2.5 sg-py-0.5 sg-text-xs sg-font-semibold sg-transition-colors focus:sg-outline-none focus:sg-ring-2 focus:sg-ring-ring focus:sg-ring-offset-2\",\n {\n variants: {\n variant: {\n default:\n \"sg-border-transparent sg-bg-orange sg-text-orange-foreground sg-shadow hover:sg-bg-orange/80\",\n purple:\n \"sg-border-transparent sg-bg-purple sg-text-purple-foreground sg-shadow hover:sg-bg-purple/80\",\n green:\n \"sg-border-transparent sg-bg-green sg-text-green-foreground sg-shadow hover:sg-bg-green/80\",\n outline: \"sg-text-foreground\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n);\n\nexport interface BadgeProps\n extends OmitClassProperty<React.HTMLAttributes<HTMLDivElement>, \"className\">,\n VariantProps<typeof badgeVariants> {\n className?: TailwindMarginClass;\n}\n\nfunction Badge({ className, variant, ...props }: BadgeProps) {\n return (\n <div className={cn(badgeVariants({ variant }), className)} {...props} />\n );\n}\n\nexport { Badge, badgeVariants };\n","import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../../utils\";\nimport { PropsWithChildren } from \"react\";\n\nconst bgColor = {\n transparent: \"sg-bg-transparent\",\n white: \"sg-bg-white\",\n black: \"sg-bg-black\",\n orange: \"sg-bg-orange\",\n purple: \"sg-bg-purple\",\n};\n\nconst layoutVariants = cva(\"sg-grid sg-grid-cols-1 sg-gap-4\", {\n variants: {\n content: {\n full: \"sg-w-full sg-px-4\",\n col: \"sg-mx-auto sg-max-w-[768px] sg-px-4 md:sg-px-0\",\n },\n cols: {\n \"100\": \"\",\n \"66-33\": \"md:sg-grid-cols-2\",\n \"50-50\": \"md:sg-grid-cols-2\",\n \"33-33-33\": \"md:sg-grid-cols-3\",\n \"25-25-25-25\": \"md:sg-grid-cols-4\",\n },\n bgcolor: bgColor,\n },\n defaultVariants: {\n content: \"col\",\n cols: \"100\",\n },\n});\n\nexport interface LayoutProps extends VariantProps<typeof layoutVariants> {\n className?: React.HTMLAttributes<HTMLDivElement>;\n}\n\nfunction Layout({\n children,\n className,\n content,\n cols,\n bgcolor,\n}: PropsWithChildren<LayoutProps>) {\n const allowedInLayout = (\n content: React.ReactElement<any, string | React.JSXElementConstructor<any>>\n ): boolean => {\n if (content.type === Layout.Col1) {\n return true;\n } else if (\n content.type === Layout.Col2 &&\n (cols === \"66-33\" ||\n cols === \"50-50\" ||\n cols === \"33-33-33\" ||\n cols === \"25-25-25-25\")\n ) {\n return true;\n } else if (\n content.type === Layout.Col3 &&\n (cols === \"33-33-33\" || cols === \"25-25-25-25\")\n ) {\n return true;\n } else if (content.type === Layout.Col4 && cols === \"25-25-25-25\") {\n return true;\n }\n\n console.error(\n \"Content not allowed in column for variant\",\n cols,\n content.type\n );\n return false;\n };\n\n const renderColumn = (\n content: React.ReactElement<any, string | React.JSXElementConstructor<any>>\n ) => {\n if (!allowedInLayout(content)) {\n return;\n }\n return <div>{content}</div>;\n };\n\n return (\n <div className={cn(bgColor[bgcolor ?? \"transparent\"], className)}>\n <div className={cn(layoutVariants({ content, cols }))}>\n {React.Children.map(children, (child) =>\n React.isValidElement(child) ? renderColumn(child) : <></>\n )}\n </div>\n </div>\n );\n}\n\ntype colProp = {\n children?: React.ReactNode;\n};\n\nfunction Col1({ children }: colProp) {\n return children;\n}\nfunction Col2({ children }: colProp) {\n return children;\n}\nfunction Col3({ children }: colProp) {\n return children;\n}\nfunction Col4({ children }: colProp) {\n return children;\n}\n\nLayout.Col1 = Col1;\nLayout.Col2 = Col2;\nLayout.Col3 = Col3;\nLayout.Col4 = Col4;\n\nexport { Layout, layoutVariants };\n"],"mappings":"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","names":["cva","jsx","cva","cva","jsx","cva","cva","jsx","cva","React","cva","jsx","cva","content"]}
1
+ {"version":3,"sources":["../lib/components/ui/heading/heading.tsx","../lib/utils.ts","../lib/components/ui/text/text.tsx","../lib/components/ui/button/button.tsx","../lib/components/ui/badge/badge.tsx","../lib/components/ui/layout/layout.tsx"],"sourcesContent":["import React from \"react\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { cn } from \"../../../utils\";\r\nimport { OmitClassProperty, TailwindMarginClass } from \"../../../lib/types\";\r\n\r\nconst headingVariants = cva(\"\", {\r\n variants: {\r\n variant: {\r\n h1: \"sg-text-4xl sg-font-extrabold sg-tracking-tight lg:sg-text-5xl\",\r\n h2: \"sg-text-3xl sg-font-semibold sg-tracking-tight sg-transition-colors first:sg-mt-0\",\r\n h3: \"sg-text-2xl sg-font-semibold sg-tracking-tight\",\r\n h4: \"sg-text-xl sg-font-semibold sg-tracking-tight\",\r\n },\r\n foreground: {\r\n default: \"sg-text-foreground\",\r\n muted: \"sg-text-muted-foreground\",\r\n primary: \"sg-text-primary\",\r\n },\r\n },\r\n defaultVariants: {\r\n variant: \"h2\",\r\n foreground: \"default\",\r\n },\r\n});\r\n\r\nexport interface HeadingProps\r\n extends OmitClassProperty<\r\n React.HTMLAttributes<HTMLHeadingElement>,\r\n \"className\"\r\n >,\r\n VariantProps<typeof headingVariants> {\r\n as?: \"h1\" | \"h2\" | \"h3\" | \"h4\";\r\n className?: TailwindMarginClass;\r\n}\r\n\r\nexport const Heading: React.FC<HeadingProps> = ({\r\n children,\r\n as,\r\n variant,\r\n foreground,\r\n className,\r\n ...props\r\n}) => {\r\n if (!as && variant) {\r\n as = variant;\r\n } else if (!as) {\r\n as = \"h2\";\r\n }\r\n const Component = as;\r\n\r\n return (\r\n <Component\r\n className={cn(headingVariants({ variant, foreground, className }))}\r\n {...props}\r\n >\r\n {children}\r\n </Component>\r\n );\r\n};\r\n","import { clsx, type ClassValue } from \"clsx\";\r\nimport { extendTailwindMerge, twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n const twMergeWithPrefix = extendTailwindMerge({\r\n prefix: \"sg-\",\r\n });\r\n\r\n return twMergeWithPrefix(twMerge(clsx(inputs)));\r\n}\r\n","import React from \"react\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { cn } from \"../../../utils\";\r\nimport { OmitClassProperty, TailwindMarginClass } from \"../../../lib/types\";\r\n\r\nconst textVariants = cva(\"\", {\r\n variants: {\r\n size: {\r\n xs: \"sg-text-xs\",\r\n sm: \"sg-text-sm\",\r\n base: \"sg-text-base\",\r\n lg: \"sg-text-lg\",\r\n xl: \"sg-text-xl\",\r\n },\r\n foreground: {\r\n default: \"sg-text-foreground\",\r\n muted: \"sg-text-muted-foreground\",\r\n primary: \"sg-text-primary\",\r\n secondary: \"sg-text-secondary-foreground\",\r\n destructive: \"sg-text-destructive\",\r\n accent: \"sg-text-accent-foreground\",\r\n },\r\n weight: {\r\n normal: \"sg-font-normal\",\r\n medium: \"sg-font-medium\",\r\n semibold: \"sg-font-semibold\",\r\n bold: \"sg-font-bold\",\r\n },\r\n },\r\n defaultVariants: {\r\n size: \"base\",\r\n foreground: \"default\",\r\n weight: \"normal\",\r\n },\r\n});\r\n\r\nexport interface TextProps\r\n extends OmitClassProperty<React.HTMLAttributes<HTMLDivElement>, \"className\">,\r\n VariantProps<typeof textVariants> {\r\n className?: TailwindMarginClass;\r\n}\r\n\r\nexport const Text: React.FC<TextProps> = ({\r\n children,\r\n size,\r\n foreground,\r\n weight,\r\n className,\r\n ...props\r\n}) => {\r\n return (\r\n <p\r\n className={cn(\r\n textVariants({\r\n size,\r\n foreground,\r\n weight,\r\n className,\r\n })\r\n )}\r\n {...props}\r\n >\r\n {children}\r\n </p>\r\n );\r\n};\r\n","import * as React from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../../utils\";\nimport { OmitClassProperty, TailwindMarginClass } from \"../../../lib/types\";\n\nconst buttonVariants = cva(\n \"sg-inline-flex sg-items-center sg-justify-center sg-gap-2 sg-whitespace-nowrap sg-rounded-md sg-text-sm sg-font-medium sg-transition-colors focus-visible:sg-outline-none focus-visible:ring-offset-2 focus-visible:sg-ring-2 focus-visible:sg-ring-ring disabled:sg-pointer-events-none disabled:sg-opacity-50 [&_svg]:sg-pointer-events-none [&_svg]:sg-size-4 [&_svg]:sg-shrink-0\",\n {\n variants: {\n variant: {\n primary:\n \"sg-bg-orange sg-text-orange-foreground sg-shadow hover:sg-bg-orange/90\",\n secondary:\n \"sg-bg-purple sg-text-purple-foreground sg-shadow-sm hover:sg-bg-purple/90\",\n destructive:\n \"sg-bg-red sg-text-red-foreground sg-shadow-sm hover:sg-bg-red/90\",\n outline:\n \"sg-border sg-border-orange sg-bg-white sg-shadow-sm hover:sg-bg-gray/20\",\n ghost: \"hover:sg-bg-accent hover:sg-text-accent-foreground\",\n link: \"sg-text-primary sg-underline-offset-4 hover:sg-underline\",\n },\n size: {\n default: \"sg-h-9 sg-px-4 sg-py-2\",\n sm: \"sg-h-8 sg-rounded-md sg-px-3 sg-text-xs\",\n lg: \"sg-h-10 sg-rounded-md sg-px-8\",\n icon: \"sg-h-9 sg-w-9\",\n },\n },\n defaultVariants: {\n variant: \"primary\",\n size: \"default\",\n },\n }\n);\n\nexport interface ButtonProps\n extends OmitClassProperty<\n React.ButtonHTMLAttributes<HTMLButtonElement>,\n \"className\"\n >,\n VariantProps<typeof buttonVariants> {\n asChild?: boolean;\n className?: TailwindMarginClass;\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n ({ className, variant, size, asChild = false, ...props }, ref) => {\n const Comp = asChild ? Slot : \"button\";\n return (\n <Comp\n className={cn(buttonVariants({ variant, size, className }))}\n ref={ref}\n {...props}\n />\n );\n }\n);\nButton.displayName = \"Button\";\n\nexport { Button, buttonVariants };\n","import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../../utils\";\nimport { OmitClassProperty, TailwindMarginClass } from \"../../../lib/types\";\n\nconst badgeVariants = cva(\n \"sg-inline-flex sg-items-center sg-rounded-md sg-border sg-px-2.5 sg-py-0.5 sg-text-xs sg-font-semibold sg-transition-colors focus:sg-outline-none focus:sg-ring-2 focus:sg-ring-ring focus:sg-ring-offset-2\",\n {\n variants: {\n variant: {\n default:\n \"sg-border-transparent sg-bg-orange sg-text-orange-foreground sg-shadow hover:sg-bg-orange/80\",\n purple:\n \"sg-border-transparent sg-bg-purple sg-text-purple-foreground sg-shadow hover:sg-bg-purple/80\",\n green:\n \"sg-border-transparent sg-bg-green sg-text-green-foreground sg-shadow hover:sg-bg-green/80\",\n outline: \"sg-text-foreground\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n);\n\nexport interface BadgeProps\n extends OmitClassProperty<React.HTMLAttributes<HTMLDivElement>, \"className\">,\n VariantProps<typeof badgeVariants> {\n className?: TailwindMarginClass;\n}\n\nfunction Badge({ className, variant, ...props }: BadgeProps) {\n return (\n <div className={cn(badgeVariants({ variant }), className)} {...props} />\n );\n}\n\nexport { Badge, badgeVariants };\n","import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../../utils\";\nimport { PropsWithChildren } from \"react\";\n\nconst bgColor = {\n transparent: \"sg-bg-transparent\",\n white: \"sg-bg-white\",\n black: \"sg-bg-black\",\n orange: \"sg-bg-orange\",\n purple: \"sg-bg-purple\",\n};\n\nconst layoutVariants = cva(\"sg-grid sg-grid-cols-1 sg-gap-4\", {\n variants: {\n type: {\n full: \"sg-w-full sg-px-4\",\n col: \"sg-mx-auto sg-max-w-[768px] sg-px-4 md:sg-px-0\",\n },\n cols: {\n \"100\": \"\",\n \"66-33\": \"md:sg-grid-cols-2\",\n \"50-50\": \"md:sg-grid-cols-2\",\n \"33-33-33\": \"md:sg-grid-cols-3\",\n \"25-25-25-25\": \"md:sg-grid-cols-4\",\n },\n bgcolor: bgColor,\n },\n defaultVariants: {\n type: \"col\",\n cols: \"100\",\n },\n});\n\nexport interface LayoutProps\n extends React.HTMLAttributes<HTMLDivElement>,\n VariantProps<typeof layoutVariants> {}\n\nfunction Layout({\n children,\n className,\n type,\n cols,\n bgcolor,\n ...props\n}: PropsWithChildren<LayoutProps>) {\n const allowedInLayout = (\n content: React.ReactElement<any, string | React.JSXElementConstructor<any>>\n ): boolean => {\n if (content.type === Layout.Col1) {\n return true;\n } else if (\n content.type === Layout.Col2 &&\n (cols === \"66-33\" ||\n cols === \"50-50\" ||\n cols === \"33-33-33\" ||\n cols === \"25-25-25-25\")\n ) {\n return true;\n } else if (\n content.type === Layout.Col3 &&\n (cols === \"33-33-33\" || cols === \"25-25-25-25\")\n ) {\n return true;\n } else if (content.type === Layout.Col4 && cols === \"25-25-25-25\") {\n return true;\n }\n\n console.error(\n \"Content not allowed in column for variant\",\n cols,\n content.type\n );\n return false;\n };\n\n const renderColumn = (\n content: React.ReactElement<any, string | React.JSXElementConstructor<any>>\n ) => {\n if (!allowedInLayout(content)) {\n return;\n }\n return <div>{content}</div>;\n };\n\n return (\n <div\n {...props}\n className={cn(bgColor[bgcolor ?? \"transparent\"], className)}\n >\n <div className={cn(layoutVariants({ type, cols }))}>\n {React.Children.map(children, (child) =>\n React.isValidElement(child) ? renderColumn(child) : <></>\n )}\n </div>\n </div>\n );\n}\n\ntype colProp = {\n children?: React.ReactNode;\n};\n\nfunction Col1({ children }: colProp) {\n return children;\n}\nfunction Col2({ children }: colProp) {\n return children;\n}\nfunction Col3({ children }: colProp) {\n return children;\n}\nfunction Col4({ children }: colProp) {\n return children;\n}\n\nLayout.Col1 = Col1;\nLayout.Col2 = Col2;\nLayout.Col3 = Col3;\nLayout.Col4 = Col4;\n\nexport { Layout, layoutVariants };\n"],"mappings":"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","names":["cva","jsx","cva","cva","jsx","cva","cva","jsx","cva","React","cva","jsx","cva"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "singularity-components",
3
- "version": "0.1.58",
3
+ "version": "0.1.59",
4
4
  "main": "./dist/main.js",
5
5
  "module": "./dist/main.mjs",
6
6
  "types": "./dist/main.d.ts",