chore(label): forward refs added

.changeset/smooth-worms-wash.md

@@ -0,0 +1,5 @@
+---
+'@groovy-box/ui': patch
+---
+
+switch component

apps/ui/lib/components/Label/Label.tsx

@@ -1,30 +1,24 @@
-import * as Label from '@radix-ui/react-label';
-import styles from './label.module.css';
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { cva, type VariantProps } from 'class-variance-authority';
 
-export const LabelDemo = ({
- htmlFor = 'firstname',
- children = 'hello',
-}: {
- htmlFor: string;
- children: string;
-}) => (
- <div
- style={{
- display: 'flex',
- padding: '0 20px',
- flexWrap: 'wrap',
- gap: 15,
- alignItems: 'center',
- }}
- >
- <Label.Root className={styles.LabelRoot} htmlFor={htmlFor}>
- {children}
- </Label.Root>
- <input
- className={styles.Input}
- type="text"
- id="firstName"
- defaultValue="Pedro Duarte"
- />
- </div>
+import { cn } from '@utils/utils';
+
+const labelVariants = cva(
+ 'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
 );
+
+const Label = React.forwardRef<
+ React.ElementRef<typeof LabelPrimitive.Root>,
+ React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+ VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+ <LabelPrimitive.Root
+ ref={ref}
+ className={cn(labelVariants(), className)}
+ {...props}
+ />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };

apps/ui/lib/components/Switch/switch.module.css.d.ts

@@ -0,0 +1,6 @@
+declare const styles: {
+ readonly "switchRoot": string;
+ readonly "switchThumb": string;
+};
+export = styles;
+

apps/ui/stories/Label.stories.tsx

@@ -1,18 +1,18 @@
 import React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
-import { LabelDemo } from '../lib'; // Assuming LabelComponent is from the same file or a relevant import path
+import { Label } from '../lib';
 
-type LabelComponentStory = StoryObj<typeof LabelDemo>;
+type LabelComponentStory = StoryObj<typeof Label>;
 
 export default {
  title: 'Components/Label',
- component: LabelDemo,
- tags: ['autodocs'], // Enable autodocs
+ component: Label,
+ tags: ['autodocs'],
  argTypes: {
  htmlFor: { control: 'text' },
  children: { control: 'text' },
  },
-} as Meta<typeof LabelDemo>;
+} as Meta<typeof Label>;
 
 export const BasicLabelComponent: LabelComponentStory = {
  args: {