@300codes/design-system 1.0.0

package/src/components/CheckboxInput/CheckboxInput.vue

@@ -0,0 +1,176 @@
+<script setup lang="ts">
+import BaseIcon from '../BaseIcon/BaseIcon.vue';
+
+export interface CheckboxInputProps {
+  name: string;
+  id?: string;
+  invalid?: boolean;
+  required?: boolean;
+  disabled?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+}
+
+withDefaults(defineProps<CheckboxInputProps>(), {
+  id: undefined,
+  size: 'md',
+});
+
+const emit = defineEmits<{
+  change: [value: boolean];
+}>();
+
+const model = defineModel<boolean>({ required: true });
+</script>
+
+<template>
+  <div :class="['checkboxInput', `checkboxInput--${size}`]">
+    <input
+      :id="id || name"
+      v-model="model"
+      type="checkbox"
+      :name="name"
+      :disabled="disabled"
+      :required="required"
+      :aria-required="required"
+      :aria-invalid="invalid"
+      :aria-disabled="disabled"
+      class="sr-only"
+      @change="emit('change', model)"
+    >
+
+    <label
+      :class="[
+        'checkboxInput__label',
+        { 'checkboxInput__label--disabled': disabled },
+        'flex items-center cursor-pointer select-none',
+      ]"
+      :for="id || name"
+    >
+      <span
+        :class="[
+          'checkboxInput__box',
+          {
+            'checkboxInput__box--checked': model,
+            'checkboxInput__box--invalid': invalid,
+          },
+          'm-0.5 flex items-center justify-center shrink-0',
+        ]"
+      >
+        <BaseIcon
+          v-if="model"
+          name="check"
+          size="auto"
+          class="checkboxInput__check"
+          aria-hidden="true"
+        />
+      </span>
+
+      <span
+        v-if="$slots.default"
+        class="checkboxInput__text"
+      >
+        <slot />
+      </span>
+    </label>
+  </div>
+</template>
+
+<style scoped>
+@reference "tailwindcss";
+
+.checkboxInput {
+  /* md / mobile */
+  --_size: var(--checkboxInput-size, 1.5rem);
+  --_icon-size: var(--checkboxInput-icon-size, 0.875rem);
+  --_radius: var(--checkboxInput-radius, 0.375rem);
+  --_fs: var(--checkboxInput-font-size-mobile, 0.875rem);
+  --_gap: var(--checkboxInput-spacing, 1rem);
+}
+
+@media (min-width: 48rem) {
+  .checkboxInput {
+    /* md / desktop */
+    --_fs: var(--checkboxInput-font-size, 1rem);
+  }
+}
+
+.checkboxInput--sm {
+  --_size: var(--checkboxInput-sm-size, 1.25rem);
+  --_icon-size: var(--checkboxInput-sm-icon-size, 0.75rem);
+  --_radius: var(--checkboxInput-sm-radius, 0.25rem);
+  --_fs: var(--checkboxInput-sm-font-size, 0.875rem);
+  --_gap: var(--checkboxInput-sm-spacing, 0.75rem);
+}
+
+.checkboxInput--lg {
+  --_size: var(--checkboxInput-lg-size, 1.75rem);
+  --_icon-size: var(--checkboxInput-lg-icon-size, 1rem);
+  --_radius: var(--checkboxInput-lg-radius, 0.5rem);
+  --_fs: var(--checkboxInput-lg-font-size, 1.125rem);
+  --_gap: var(--checkboxInput-lg-spacing, 1.25rem);
+}
+
+/* ── label ───────────────────────────────────────────────────────────────── */
+
+.checkboxInput__label {
+  gap: var(--_gap);
+  font-size: var(--_fs);
+  color: var(--input-fg, #0e161b);
+}
+
+.checkboxInput__label--disabled {
+  color: var(--input-fg-disabled, #89979f);
+
+  @apply cursor-not-allowed pointer-events-none;
+}
+
+/* ── box ─────────────────────────────────────────────────────────────────── */
+
+.checkboxInput__box {
+  width: var(--_size);
+  height: var(--_size);
+  border-radius: var(--_radius);
+  background-color: var(--input-bg, #ffffff);
+  border: var(--checkboxInput-border-width, 1.5px) solid var(--input-border-color, #d6dde1);
+  outline: var(--input-outline-width, 4px) solid transparent;
+  outline-offset: var(--checkboxInput-outline-offset, -2px);
+}
+
+.checkboxInput__label:not(.checkboxInput__label--disabled):hover .checkboxInput__box {
+  background-color: var(--input-bg-hover, #f3f5f7);
+  border-color: var(--input-border-color-hover, #b0babf);
+}
+
+.checkboxInput__box--checked {
+  background-color: var(--checkboxInput-checked-bg, #09865e) !important;
+  border-color: var(--checkboxInput-checked-bg, #09865e) !important;
+  color: var(--checkboxInput-checked-fg, #ffffff);
+}
+
+.checkboxInput__box--invalid {
+  border-color: var(--input-border-color-invalid, #ef4444);
+}
+
+.checkboxInput__check {
+  width: var(--_icon-size);
+  height: var(--_icon-size);
+}
+
+/* ── disabled ────────────────────────────────────────────────────────────── */
+
+.checkboxInput__label--disabled .checkboxInput__box {
+  background-color: var(--input-bg-disabled, #d6dde1);
+  border-color: var(--checkboxInput-border-color-disabled, #89979f);
+}
+
+.checkboxInput__label--disabled .checkboxInput__box--checked {
+  background-color: var(--checkboxInput-checked-disabled-bg, #89979f) !important;
+  border-color: var(--checkboxInput-checked-disabled-bg, #89979f) !important;
+}
+
+/* ── focus ───────────────────────────────────────────────────────────────── */
+
+input:focus-visible + .checkboxInput__label .checkboxInput__box {
+  outline-color: var(--input-outline, #3b82f6);
+}
+</style>

package/src/components/CheckboxInput/index.ts

@@ -0,0 +1,2 @@
+export { default as CheckboxInput } from './CheckboxInput.vue';
+export type { CheckboxInputProps } from './CheckboxInput.vue';

package/src/components/LabelInput/LabelInput.vue

@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import BaseIcon from '../BaseIcon/BaseIcon.vue';
+
+export interface LabelInputProps {
+  name: string;
+  label: string;
+  message?: string;
+  required?: boolean;
+  invalid?: boolean | null;
+  disabled?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+  hasStatus?: boolean;
+}
+
+withDefaults(defineProps<LabelInputProps>(), {
+  message: '',
+  size: 'md',
+  invalid: null,
+  disabled: false,
+  hasStatus: true,
+});
+</script>
+
+<template>
+  <div :class="['labelInput', `labelInput--${size}`, 'flex flex-col']">
+    <label
+      :for="name"
+      :class="['labelInput__label leading-normal', { 'labelInput__label--disabled': disabled }]"
+    >
+      {{ `${label}${required ? ' *' : ''}` }}
+    </label>
+
+    <div class="labelInput__control relative">
+      <slot :disabled="disabled" />
+
+      <BaseIcon
+        v-if="hasStatus && typeof invalid === 'boolean'"
+        :name="invalid ? 'error' : 'success'"
+        size="auto"
+        :class="[
+          'labelInput__status',
+          invalid ? 'labelInput__status--invalid' : 'labelInput__status--valid',
+          'absolute top-1/2 right-3 -translate-y-1/2 pointer-events-none',
+        ]"
+      />
+    </div>
+
+    <span
+      v-if="message"
+      class="labelInput__message leading-normal"
+    >
+      {{ message }}
+    </span>
+  </div>
+</template>
+
+<style scoped>
+.labelInput {
+  --_icon-size: var(--labelInput-md-status-size, 1.75rem);
+  --_fs: var(--labelInput-font-size, 0.8125rem);
+  --_msg-fs: var(--labelInput-message-font-size, 0.8125rem);
+  --_label-mb: var(--labelInput-label-mb, 0.25rem);
+  --_msg-mt: var(--labelInput-message-mt, 0px);
+}
+
+.labelInput--sm {
+  --_icon-size: var(--labelInput-sm-status-size, 1.5rem);
+  --_fs: var(--labelInput-sm-font-size, 0.6875rem);
+  --_msg-fs: var(--labelInput-sm-message-font-size, 0.8125rem);
+  --_label-mb: var(--labelInput-sm-label-mb, 0.125rem);
+  --_msg-mt: var(--labelInput-sm-message-mt, 0px);
+}
+
+.labelInput--lg {
+  --_icon-size: var(--labelInput-lg-status-size, 2rem);
+  --_fs: var(--labelInput-lg-font-size, 0.875rem);
+  --_msg-fs: var(--labelInput-lg-message-font-size, 0.875rem);
+  --_label-mb: var(--labelInput-lg-label-mb, 0.5rem);
+  --_msg-mt: var(--labelInput-lg-message-mt, 1px);
+}
+
+.labelInput__label {
+  font-size: var(--_fs);
+  font-weight: var(--labelInput-font-weight, 400);
+  color: var(--labelInput-fg, #0e161b);
+  margin-bottom: var(--_label-mb);
+}
+
+.labelInput__label--disabled {
+  color: var(--labelInput-fg-disabled, #89979f);
+}
+
+.labelInput__status--valid {
+  color: var(--labelInput-status-valid-fg, #16a34a);
+}
+
+.labelInput__status--invalid {
+  color: var(--labelInput-status-invalid-fg, #ef4444);
+}
+
+.labelInput__status {
+  width: var(--_icon-size);
+  height: var(--_icon-size);
+}
+
+.labelInput__message {
+  color: var(--labelInput-message-fg, #ef4444);
+  font-size: var(--_msg-fs);
+  margin-top: var(--_msg-mt);
+}
+</style>

package/src/components/LabelInput/index.ts

@@ -0,0 +1,2 @@
+export { default as LabelInput } from './LabelInput.vue';
+export type { LabelInputProps } from './LabelInput.vue';

package/src/components/RadioInput/RadioInput.stories.ts

@@ -0,0 +1,114 @@
+import { ref } from 'vue';
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import type { ConcreteComponent } from 'vue';
+import type { RadioInputProps } from './RadioInput.vue';
+import RadioInput from './RadioInput.vue';
+
+const meta: Meta<RadioInputProps> = {
+  title: 'Form/RadioInput',
+  component: RadioInput as unknown as ConcreteComponent<RadioInputProps>,
+  tags: ['autodocs'],
+  argTypes: {
+    size: { control: 'select', options: ['sm', 'md', 'lg'] },
+    invalid: { control: 'boolean' },
+    required: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<RadioInputProps>;
+
+export const Default: Story = {
+  args: { name: 'plan', value: 'basic', size: 'md' },
+  render: (args: RadioInputProps) => ({
+    components: { RadioInput },
+    setup() {
+      const model = ref('');
+      return { args, model };
+    },
+    template: '<RadioInput v-bind="args" v-model="model">Basic</RadioInput>',
+  }),
+};
+
+export const Selected: Story = {
+  args: { name: 'plan-selected', value: 'pro', size: 'md' },
+  render: (args: RadioInputProps) => ({
+    components: { RadioInput },
+    setup() {
+      const model = ref('pro');
+      return { args, model };
+    },
+    template: '<RadioInput v-bind="args" v-model="model">Pro</RadioInput>',
+  }),
+};
+
+export const Invalid: Story = {
+  args: { name: 'plan-invalid', value: 'basic', size: 'md', invalid: true },
+  render: (args: RadioInputProps) => ({
+    components: { RadioInput },
+    setup() {
+      const model = ref('');
+      return { args, model };
+    },
+    template: '<RadioInput v-bind="args" v-model="model">Wymagany wybór</RadioInput>',
+  }),
+};
+
+export const Disabled: Story = {
+  args: { name: 'plan-disabled', value: 'basic', size: 'md', disabled: true },
+  render: (args: RadioInputProps) => ({
+    components: { RadioInput },
+    setup() {
+      const model = ref('');
+      return { args, model };
+    },
+    template: '<RadioInput v-bind="args" v-model="model">Niedostępne</RadioInput>',
+  }),
+};
+
+export const DisabledChecked: Story = {
+  args: { name: 'plan-disabled-checked', value: 'basic', size: 'md', disabled: true },
+  render: (args: RadioInputProps) => ({
+    components: { RadioInput },
+    setup() {
+      const model = ref('basic');
+      return { args, model };
+    },
+    template: '<RadioInput v-bind="args" v-model="model">Niedostępne (zaznaczone)</RadioInput>',
+  }),
+};
+
+export const Group: Story = {
+  render: () => ({
+    components: { RadioInput },
+    setup() {
+      const selected = ref('');
+      return { selected };
+    },
+    template: `
+      <div class="flex flex-col gap-3">
+        <RadioInput name="group" value="basic" size="md" v-model="selected">Basic</RadioInput>
+        <RadioInput name="group" value="pro" size="md" v-model="selected">Pro</RadioInput>
+        <RadioInput name="group" value="enterprise" size="md" v-model="selected">Enterprise</RadioInput>
+      </div>
+    `,
+  }),
+};
+
+export const Sizes: Story = {
+  render: () => ({
+    components: { RadioInput },
+    setup() {
+      const selected = ref('');
+      return { selected };
+    },
+    template: `
+      <div class="flex flex-col gap-4">
+        <RadioInput name="sizes" value="sm" size="sm" v-model="selected">Small (24px)</RadioInput>
+        <RadioInput name="sizes" value="md" size="md" v-model="selected">Medium (28px)</RadioInput>
+        <RadioInput name="sizes" value="lg" size="lg" v-model="selected">Large (32px)</RadioInput>
+      </div>
+    `,
+  }),
+};

package/src/components/RadioInput/RadioInput.vue

@@ -0,0 +1,174 @@
+<script setup lang="ts">
+export interface RadioInputProps {
+  name: string;
+  value: string;
+  id?: string;
+  invalid?: boolean;
+  required?: boolean;
+  disabled?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+}
+
+withDefaults(defineProps<RadioInputProps>(), {
+  id: undefined,
+  size: 'md',
+});
+
+const emit = defineEmits<{
+  change: [value: string];
+}>();
+
+const model = defineModel<string>({ required: true });
+</script>
+
+<template>
+  <div :class="['radioInput', `radioInput--${size}`]">
+    <input
+      :id="id || `${name}-${value}`"
+      v-model="model"
+      type="radio"
+      :name="name"
+      :value="value"
+      :disabled="disabled"
+      :required="required"
+      :aria-required="required"
+      :aria-invalid="invalid"
+      :aria-disabled="disabled"
+      class="sr-only"
+      @change="emit('change', model)"
+    >
+    <label
+      :class="[
+        'radioInput__label',
+        { 'radioInput__label--disabled': disabled },
+        'flex items-center cursor-pointer select-none',
+      ]"
+      :for="id || `${name}-${value}`"
+    >
+      <span
+        :class="[
+          'radioInput__box',
+          {
+            'radioInput__box--checked': model === value,
+            'radioInput__box--invalid': invalid,
+          },
+          'm-0.5 flex items-center justify-center shrink-0',
+        ]"
+      >
+        <span
+          v-if="model === value"
+          class="radioInput__dot"
+        />
+      </span>
+
+      <span
+        v-if="$slots.default"
+        class="radioInput__text"
+      >
+        <slot />
+      </span>
+    </label>
+  </div>
+</template>
+
+<style scoped>
+@reference "tailwindcss";
+
+.radioInput {
+  /* md / mobile */
+  --_size: var(--radioInput-size, 1.5rem);
+  --_fs: var(--radioInput-font-size-mobile, 0.875rem);
+  --_gap: var(--radioInput-spacing, 1rem);
+  --_dot-size: var(--radioInput-dot-size, 0.875rem);
+}
+
+@media (min-width: 48rem) {
+  .radioInput {
+    /* md / desktop */
+    --_fs: var(--radioInput-font-size, 1rem);
+  }
+}
+
+.radioInput--sm {
+  --_size: var(--radioInput-sm-size, 1.25rem);
+  --_fs: var(--radioInput-sm-font-size, 0.875rem);
+  --_gap: var(--radioInput-sm-spacing, 0.75rem);
+  --_dot-size: var(--radioInput-sm-dot-size, 0.875rem);
+}
+
+.radioInput--lg {
+  --_size: var(--radioInput-lg-size, 1.75rem);
+  --_fs: var(--radioInput-lg-font-size, 1.125rem);
+  --_gap: var(--radioInput-lg-spacing, 1.25rem);
+  --_dot-size: var(--radioInput-lg-dot-size, 1rem);
+}
+
+/* ── label ───────────────────────────────────────────────────────────────── */
+
+.radioInput__label {
+  gap: var(--_gap);
+  font-size: var(--_fs);
+  color: var(--input-fg, #0e161b);
+}
+
+.radioInput__label--disabled {
+  color: var(--input-fg-disabled, #89979f);
+
+  @apply cursor-not-allowed pointer-events-none;
+}
+
+/* ── box ─────────────────────────────────────────────────────────────────── */
+
+.radioInput__box {
+  width: var(--_size);
+  height: var(--_size);
+  border-radius: 50%;
+  background-color: var(--input-bg, #ffffff);
+  border: var(--checkboxInput-border-width, 1.5px) solid var(--input-border-color, #d6dde1);
+  outline: var(--input-outline-width, 4px) solid transparent;
+  outline-offset: var(--checkboxInput-outline-offset, -2px);
+}
+
+.radioInput__label:not(.radioInput__label--disabled):hover .radioInput__box {
+  background-color: var(--input-bg-hover, #f3f5f7);
+  border-color: var(--input-border-color-hover, #b0babf);
+}
+
+.radioInput__box--checked {
+  background-color: var(--radioInput-checked-bg, #ffffff) !important;
+  border-color: var(--radioInput-checked-border, #09865e) !important;
+}
+
+.radioInput__box--invalid {
+  border-color: var(--input-border-color-invalid, #ef4444);
+}
+
+.radioInput__dot {
+  width: var(--_dot-size);
+  height: var(--_dot-size);
+  background-color: var(--radioInput-checked-dot, #09865e);
+
+  @apply rounded-full;
+}
+
+/* ── disabled ────────────────────────────────────────────────────────────── */
+
+.radioInput__label--disabled .radioInput__box {
+  background-color: var(--input-bg-disabled, #d6dde1);
+  border-color: var(--checkboxInput-border-color-disabled, #89979f);
+}
+
+.radioInput__label--disabled .radioInput__box--checked {
+  background-color: var(--radioInput-checked-disabled-bg, #ffffff) !important;
+}
+
+.radioInput__label--disabled .radioInput__dot {
+  background-color: var(--radioInput-checked-disabled-dot, #89979f);
+}
+
+/* ── focus ───────────────────────────────────────────────────────────────── */
+
+input:focus-visible + .radioInput__label .radioInput__box {
+  outline-color: var(--input-outline, #3b82f6);
+}
+</style>

package/src/components/RadioInput/index.ts

@@ -0,0 +1,2 @@
+export { default as RadioInput } from './RadioInput.vue';
+export type { RadioInputProps } from './RadioInput.vue';

package/src/components/SearchInput/SearchInput.stories.ts

@@ -0,0 +1,103 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import type { ConcreteComponent } from 'vue';
+import { ref } from 'vue';
+import type { SearchInputProps } from './SearchInput.vue';
+import SearchInput from './SearchInput.vue';
+
+const meta: Meta<SearchInputProps> = {
+  title: 'Form/SearchInput',
+  component: SearchInput as unknown as ConcreteComponent<SearchInputProps>,
+  tags: ['autodocs'],
+  argTypes: {
+    size: { control: 'select', options: ['sm', 'md', 'lg'] },
+    disabled: { control: 'boolean' },
+    required: { control: 'boolean' },
+  },
+  decorators: [
+    () => ({ template: '<div style="max-width: 560px"><story /></div>' }),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<SearchInputProps>;
+
+export const Default: Story = {
+  args: {
+    name: 'search',
+    placeholder: 'Search...',
+    size: 'md',
+  },
+  render: (args: SearchInputProps) => ({
+    components: { SearchInput },
+    setup() {
+      const value = ref('');
+      return { args, value };
+    },
+    template: '<SearchInput v-model="value" v-bind="args" />',
+  }),
+};
+
+export const WithValue: Story = {
+  args: {
+    name: 'search',
+    placeholder: 'Search...',
+    size: 'md',
+  },
+  render: (args: SearchInputProps) => ({
+    components: { SearchInput },
+    setup() {
+      const value = ref('Hello world');
+      return { args, value };
+    },
+    template: '<SearchInput v-model="value" v-bind="args" />',
+  }),
+};
+
+export const Small: Story = {
+  args: {
+    name: 'search-sm',
+    placeholder: 'Search...',
+    size: 'sm',
+  },
+  render: (args: SearchInputProps) => ({
+    components: { SearchInput },
+    setup() {
+      const value = ref('');
+      return { args, value };
+    },
+    template: '<SearchInput v-model="value" v-bind="args" />',
+  }),
+};
+
+export const Large: Story = {
+  args: {
+    name: 'search-lg',
+    placeholder: 'Search...',
+    size: 'lg',
+  },
+  render: (args: SearchInputProps) => ({
+    components: { SearchInput },
+    setup() {
+      const value = ref('');
+      return { args, value };
+    },
+    template: '<SearchInput v-model="value" v-bind="args" />',
+  }),
+};
+
+export const Disabled: Story = {
+  args: {
+    name: 'search-disabled',
+    placeholder: 'Search...',
+    size: 'md',
+    disabled: true,
+  },
+  render: (args: SearchInputProps) => ({
+    components: { SearchInput },
+    setup() {
+      const value = ref('');
+      return { args, value };
+    },
+    template: '<SearchInput v-model="value" v-bind="args" />',
+  }),
+};