@hashrytech/quick-components-kit 0.17.9 → 0.18.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @hashrytech/quick-components-kit
 
+## 0.18.1
+
+### Patch Changes
+
+- patch: parentDivClass for select
+
+## 0.18.0
+
+### Minor Changes
+
+- feat: Adding select componennt
+
 ## 0.17.9
 
 ### Patch Changes

package/dist/components/select/Select.svelte

@@ -0,0 +1,62 @@
+<script lang="ts" module>
+  import type { ClassNameValue } from 'tailwind-merge';
+  import type { Snippet } from 'svelte';
+
+  export type Option = {
+    value: string | number;
+    label: string;
+    disabled?: boolean;
+  };
+
+  export type SelectProps = {
+    id: string;
+    name?: string;
+    label?: string;
+    disabled?: boolean;
+    value?: string | number;
+    options: Option[];
+    size?: "sm" | "md" | "lg";
+    labelPosition?: "left" | "top" | "right" | "bottom";
+    class?: ClassNameValue;
+    labelClass?: ClassNameValue;
+    optionsClass?: ClassNameValue;
+    parentDivClass?: ClassNameValue;
+    icon?: Snippet;
+    onchange?: (event: Event) => void;
+  };
+</script>
+
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+
+  let { id, name, label = "", labelPosition = "top", value = $bindable(), options=$bindable([]), size = "md", disabled = $bindable(false), labelClass, parentDivClass, optionsClass, onchange, ...restProps}: SelectProps = $props();
+
+  const sizeMap = {
+    sm: "text-sm py-1 px-2 h-8",
+    md: "text-base py-2 px-3 h-10",
+    lg: "text-lg py-3 px-4 h-12",
+  };
+
+  const directionClass = {
+    top: "flex-col gap-1",
+    bottom: "flex-col-reverse gap-1",
+    left: "flex-row items-center gap-2",
+    right: "flex-row-reverse items-center gap-2",
+  };
+</script>
+
+<div class={twMerge("flex", directionClass[labelPosition] ?? directionClass.top, parentDivClass)}>
+  {#if label}
+    <label for={id} class={twMerge("text-sm font-medium text-primary-label-text ml-1", labelClass)}>{label}</label>
+  {/if}
+
+  <select {id} name={name ?? id} bind:value {disabled} onchange={onchange} 
+    class={twMerge("rounded-primary border border-primary-input-border focus:border-primary-focus focus:ring-primary-focus placeholder:opacity-50 disabled:bg-neutral-300/30 disabled:border-neutral-300/30",
+    sizeMap[size], restProps.class)}>
+    {#each options as option}
+      <option value={option.value} disabled={option.disabled} class={twMerge("", optionsClass)}>
+        {option.label}
+      </option>
+    {/each}
+  </select>
+</div>

package/dist/components/select/Select.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { ClassNameValue } from 'tailwind-merge';
+import type { Snippet } from 'svelte';
+export type Option = {
+    value: string | number;
+    label: string;
+    disabled?: boolean;
+};
+export type SelectProps = {
+    id: string;
+    name?: string;
+    label?: string;
+    disabled?: boolean;
+    value?: string | number;
+    options: Option[];
+    size?: "sm" | "md" | "lg";
+    labelPosition?: "left" | "top" | "right" | "bottom";
+    class?: ClassNameValue;
+    labelClass?: ClassNameValue;
+    optionsClass?: ClassNameValue;
+    parentDivClass?: ClassNameValue;
+    icon?: Snippet;
+    onchange?: (event: Event) => void;
+};
+declare const Select: import("svelte").Component<SelectProps, {}, "value" | "disabled" | "options">;
+type Select = ReturnType<typeof Select>;
+export default Select;

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

@@ -0,0 +1 @@
+export { default as Select } from './Select.svelte';

package/dist/components/select/index.js

@@ -0,0 +1 @@
+export { default as Select } from './Select.svelte';

package/dist/components/text-input/TextInput.svelte

@@ -73,7 +73,7 @@
     <div class="relative">
         {#if icon}<div class="absolute inset-y-0 left-0 flex items-center justify-center rounded-l-primary m-0.5 w-10">{@render icon()}</div>{/if}
         <input {disabled} {required} {type} {id} name={name ? name: id} {placeholder} {onchange} {onmouseup} bind:value 
-            class={twMerge("rounded-primary border-primary-input-border focus:border-primary-focus focus:ring-primary-focus placeholder:opacity-50 disabled:bg-neutral-300/30 disabled:border-neutral-300/30",
+            class={twMerge("rounded-primary border border-primary-input-border focus:border-primary-focus focus:ring-primary-focus placeholder:opacity-50 disabled:bg-neutral-300/30 disabled:border-neutral-300/30",
             error ? "bg-red-50 border-red-300" : "", 
             icon ? "pl-10" : "",
             sizeStyle[size], props.class)}

package/dist/index.d.ts

@@ -6,6 +6,7 @@ export * from './components/drawer/index.js';
 export * from './components/modal/index.js';
 export * from './components/overlay/index.js';
 export * from './components/radio/index.js';
+export * from './components/select/index.js';
 export * from './components/checkbox/index.js';
 export * from './components/tab-navigation/index.js';
 export * from './components/portal/index.js';

package/dist/index.js

@@ -8,6 +8,7 @@ export * from './components/drawer/index.js';
 export * from './components/modal/index.js';
 export * from './components/overlay/index.js';
 export * from './components/radio/index.js';
+export * from './components/select/index.js';
 export * from './components/checkbox/index.js';
 export * from './components/tab-navigation/index.js';
 export * from './components/portal/index.js';

package/package.json

@@ -5,7 +5,7 @@
     "type": "git",
     "url": "git+https://github.com/hashrytech/quick-components-kit.git"
   },
-  "version": "0.17.9",
+  "version": "0.18.1",
   "license": "MIT",
   "author": "Hashry Tech",
   "files": [