@casinogate/ui 1.0.1 → 1.1.1

package/dist/components/field/styles.js

@@ -0,0 +1,12 @@
+import { keyWithPrefix } from '../../internal/utils/common.js';
+import { tv } from '../../internal/utils/tailwindcss.js';
+import { Context } from 'runed';
+export const fieldStyles = tv({
+    slots: {
+        root: 'cgui:flex cgui:flex-col cgui:gap-1',
+        label: 'cgui:text-fg-medium cgui:text-caption cgui:font-medium',
+        error: 'cgui:text-caption  cgui:text-fg-error',
+        description: 'cgui:text-caption cgui:text-fg-medium',
+    },
+});
+export const FieldStylesContext = new Context(keyWithPrefix('field-styles'));

package/dist/components/input/input.svelte

@@ -45,10 +45,10 @@
     {/if}
 
     <input
+      {id}
       bind:this={ref}
       data-start-chevron={getDataActive(Boolean(startChevron))}
       data-end-chevron={getDataActive(Boolean(endChevron))}
-      {id}
       data-slot="input"
       class={cn(variants.input(), className)}
       {...restProps}

package/dist/components/separator/index.d.ts

@@ -0,0 +1,5 @@
+import { type SeparatorProps } from './separator.svelte';
+export declare const Separator: {
+    Root: import("svelte").Component<import("bits-ui").SeparatorRootProps, {}, "ref">;
+};
+export type { SeparatorProps };

package/dist/components/separator/index.js

@@ -0,0 +1,4 @@
+import Root, {} from './separator.svelte';
+export const Separator = {
+    Root,
+};

package/dist/components/separator/separator.stories.svelte

@@ -0,0 +1,44 @@
+<script lang="ts" module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import type { Parameters } from '@storybook/sveltekit';
+  import type { ComponentProps } from 'svelte';
+  import Separator from './separator.svelte';
+
+  const parameters: Parameters = {
+    controls: {
+      include: ['orientation'],
+    },
+  };
+
+  const { Story } = defineMeta({
+    title: 'UI Kit/Separator',
+    component: Separator,
+    tags: ['autodocs'],
+    parameters,
+  });
+
+  type Args = ComponentProps<typeof Separator>;
+
+  const args: Args = {
+    orientation: 'horizontal',
+  };
+</script>
+
+<Story name="Basic" {args} {parameters}>
+  {#snippet template()}
+    <div>
+      <div class="cgui:space-y-1">
+        <h4 class="cgui:text-sm cgui:font-medium cgui:leading-none">CG UI</h4>
+        <p class="cgui:text-fg-semilight cgui:text-sm">Labore minim aliquip dolore ullamco sit laboris.</p>
+      </div>
+      <Separator class="cgui:my-4" />
+      <div class="cgui:flex cgui:h-5 cgui:items-center cgui:space-x-4 cgui:text-sm">
+        <div>Blog</div>
+        <Separator orientation="vertical" />
+        <div>Docs</div>
+        <Separator orientation="vertical" />
+        <div>Source</div>
+      </div>
+    </div>
+  {/snippet}
+</Story>

package/dist/components/separator/separator.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import Separator from './separator.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Separator: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Separator = InstanceType<typeof Separator>;
+export default Separator;

package/dist/components/separator/separator.svelte

@@ -0,0 +1,21 @@
+<script lang="ts" module>
+  export type SeparatorProps = SeparatorPrimitive.RootProps;
+</script>
+
+<script lang="ts">
+  import { SLOT_ATTR_NAME } from '../../internal/constants/attrs.js';
+  import { cn } from '../../internal/utils/common.js';
+  import { Separator as SeparatorPrimitive } from 'bits-ui';
+
+  let { ref = $bindable(null), class: className, ...restProps }: SeparatorProps = $props();
+</script>
+
+<SeparatorPrimitive.Root
+  bind:ref
+  class={cn(
+    'cgui:bg-stroke-divider cgui:shrink-0 cgui:data-[orientation=horizontal]:h-px cgui:data-[orientation=vertical]:h-full cgui:data-[orientation=horizontal]:w-full cgui:data-[orientation=vertical]:w-px',
+    className
+  )}
+  {...{ [SLOT_ATTR_NAME]: 'separator' }}
+  {...restProps}
+/>

package/dist/components/separator/separator.svelte.d.ts

@@ -0,0 +1,5 @@
+export type SeparatorProps = SeparatorPrimitive.RootProps;
+import { Separator as SeparatorPrimitive } from 'bits-ui';
+declare const Separator: import("svelte").Component<SeparatorPrimitive.RootProps, {}, "ref">;
+type Separator = ReturnType<typeof Separator>;
+export default Separator;

package/dist/components/skeleton/skeleton.stories.svelte

@@ -6,7 +6,7 @@
 
   const parameters: Parameters = {
     controls: {
-      include: ['rounded', 'w', 'variant'],
+      include: ['rounded', 'w', 'variant', 'count'],
     },
   };
 
@@ -54,6 +54,14 @@
   {parameters}
 />
 
+<Story name="Count" {args} {parameters}>
+  {#snippet template(args: Args)}
+    <div class="cgui:flex cgui:gap-2.5">
+      <Skeleton {...args} class="cgui:h-11" w="full" count={3} />
+    </div>
+  {/snippet}
+</Story>
+
 <Story
   name="Avatar"
   args={{

package/dist/components/skeleton/skeleton.svelte

@@ -4,7 +4,10 @@
   import type { WithElementRef, Without } from 'svelte-toolbelt';
   import { skeletonStyles, type SkeletonVariantProps } from './styles.js';
 
-  type SkeletonPropsWithoutHTML = WithElementRef<{}> & SkeletonVariantProps;
+  type SkeletonPropsWithoutHTML = WithElementRef<{
+    count?: number;
+  }> &
+    SkeletonVariantProps;
 
   export type SkeletonProps = SkeletonPropsWithoutHTML & Without<PrimitiveDivAttributes, SkeletonPropsWithoutHTML>;
 </script>
@@ -16,10 +19,13 @@
     w = 'clear',
     rounded = 'md',
     variant = 'clear',
+    count = 1,
     ...restProps
   }: SkeletonProps = $props();
 
   const variants = $derived(skeletonStyles({ w, rounded, variant }));
 </script>
 
-<div class={cn(variants, className)} {...restProps}></div>
+{#each Array.from({ length: count }) as i (i)}
+  <div class={cn(variants, className)} {...restProps}></div>
+{/each}

package/dist/components/skeleton/skeleton.svelte.d.ts

@@ -1,7 +1,9 @@
 import type { PrimitiveDivAttributes } from '../../internal/types/html-attributes.js';
 import type { WithElementRef, Without } from 'svelte-toolbelt';
 import { type SkeletonVariantProps } from './styles.js';
-type SkeletonPropsWithoutHTML = WithElementRef<{}> & SkeletonVariantProps;
+type SkeletonPropsWithoutHTML = WithElementRef<{
+    count?: number;
+}> & SkeletonVariantProps;
 export type SkeletonProps = SkeletonPropsWithoutHTML & Without<PrimitiveDivAttributes, SkeletonPropsWithoutHTML>;
 declare const Skeleton: import("svelte").Component<SkeletonProps, {}, "ref">;
 type Skeleton = ReturnType<typeof Skeleton>;

package/dist/components/toast/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/toast/index.js

@@ -0,0 +1 @@
+"use strict";

package/dist/index.d.ts

@@ -8,3 +8,7 @@ export * from './components/segment/index.js';
 export * from './components/icons/index.js';
 export * from './components/input/index.js';
 export * from './components/spinner/index.js';
+export * from './components/button-group/index.js';
+export * from './components/skeleton/index.js';
+export * from './components/field/index.js';
+export * from './components/separator/index.js';

package/dist/index.js

@@ -8,3 +8,7 @@ export * from './components/segment/index.js';
 export * from './components/icons/index.js';
 export * from './components/input/index.js';
 export * from './components/spinner/index.js';
+export * from './components/button-group/index.js';
+export * from './components/skeleton/index.js';
+export * from './components/field/index.js';
+export * from './components/separator/index.js';

package/dist/internal/constants/attrs.d.ts

@@ -0,0 +1 @@
+export declare const SLOT_ATTR_NAME: "data-slot";

package/dist/internal/constants/attrs.js

@@ -0,0 +1 @@
+export const SLOT_ATTR_NAME = 'data-slot';

package/dist/internal/types/html-attributes.d.ts

@@ -39,6 +39,7 @@ export type PrimitiveTrAttributes = Primitive<TableRowAttributes>;
 export type PrimitiveTheadAttributes = Primitive<TableSectionAttributes>;
 export type PrimitiveHeaderAttributes = Primitive<ElementAttributes>;
 export type PrimitiveFormAttributes = Primitive<FormAttributes>;
+export type PrimitiveParagraphAttributes = Primitive<ParagraphAttributes>;
 export type ExtractPrimitiveEvents<Type extends Record<string, any>> = {
     [K in keyof Type as K extends `on${string}` ? K : never]: Type[K];
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@casinogate/ui",
-  "version": "1.0.1",
+  "version": "1.1.1",
   "files": [
     "dist",
     "!dist/**/*.test.*",