@hellboy/ds 0.1.3 → 0.2.7

package/{src/style/components/input → dist/components}/input.css

@@ -1,34 +1,117 @@
-/**
- * Input Component Styles
- * Form input with label, icons, and accessibility support
- * Uses action colors for focus states
- */
+/* src/style/components/icons/icons.css */
+.icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.icon--skeleton {
+  background:
+    linear-gradient(
+      90deg,
+      rgba(0, 0, 0, 0.06) 0%,
+      rgba(0, 0, 0, 0.03) 50%,
+      rgba(0, 0, 0, 0.06) 100%);
+  border-radius: 4px;
+  animation: hb-skeleton 1.2s ease-in-out infinite;
+}
+@keyframes hb-skeleton {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+.icon {
+  display: inline-block;
+  flex-shrink: 0;
+  transition: color var(--transition-base, 0.2s ease);
+}
+.icon--interactive {
+  cursor: pointer;
+  color: var(--color-foreground-1);
+}
+.icon--interactive:hover:not(:disabled) {
+  color: var(--color-action-primary-hover);
+}
+.icon--interactive:active:not(:disabled) {
+  color: var(--color-action-primary-active);
+}
+.icon--interactive:disabled {
+  cursor: not-allowed;
+  color: var(--color-foreground-2);
+}
 
-@import '../../_shared/field.css';
+/* src/style/_shared/field.css */
+.field {
+  width: 100%;
+  font-family: inherit;
+  font-size: var(--font-size-base);
+  line-height: 1.5;
+  color: var(--color-foreground-1);
+  background-color: var(--color-bg-1);
+  border: none;
+  outline: 2px solid var(--color-foreground-3);
+  outline-offset: -2px;
+  border-radius: var(--radius-base);
+  padding: var(--spacing-2) var(--spacing-3);
+  transition: outline-color var(--transition-base), box-shadow var(--transition-base);
+  cursor: pointer;
+}
+.field--sm {
+  font-size: var(--font-size-sm);
+  padding: var(--spacing-1) var(--spacing-2);
+}
+.field--lg {
+  font-size: var(--font-size-lg);
+  padding: var(--spacing-3) var(--spacing-4);
+}
+.field:focus,
+.field:focus-visible {
+  outline-color: var(--color-action-primary);
+  box-shadow: var(--shadow-focus-ring);
+}
+.field:hover:not(:disabled):not(.field--error) {
+  outline-color: var(--color-action-primary-hover);
+}
+.field--error {
+  outline-color: hsla(var(--error-hue), var(--error-saturation), 50%, 1);
+}
+.field--error:focus,
+.field--error:focus-visible {
+  outline-color: hsla(var(--error-hue), var(--error-saturation), 50%, 1);
+  box-shadow: var(--shadow-focus-ring-error);
+}
+.field:disabled,
+.field--disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+  background-color: var(--color-bg-2);
+}
+.field--open {
+  outline-color: var(--color-action-primary);
+}
 
+/* src/style/components/input/input.css */
 .input-container {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-2);
 }
-
 .input-container--full-width {
   width: 100%;
 }
-
 .input__label {
   font-size: var(--font-size-sm);
   font-weight: 500;
   color: var(--color-foreground-1);
   cursor: pointer;
 }
-
 .input__wrapper {
   position: relative;
   display: flex;
   align-items: center;
 }
-
 .input {
   width: 100%;
   font-family: inherit;
@@ -43,42 +126,30 @@
   padding: var(--spacing-2) var(--spacing-3);
   transition: outline-color var(--transition-base), box-shadow var(--transition-base);
 }
-
-/* Size variants */
 .input--sm {
   font-size: var(--font-size-sm);
   padding: var(--spacing-1) var(--spacing-2);
 }
-
 .input--lg {
   font-size: var(--font-size-lg);
   padding: var(--spacing-3) var(--spacing-4);
 }
-
-/* Error variant */
 .input--error {
   outline-color: hsla(var(--error-hue), var(--error-saturation), 50%, 1);
 }
-
 .input--error:focus {
   outline-color: hsla(var(--error-hue), var(--error-saturation), 50%, 1);
-  box-shadow: 0 0 0 3px hsla(var(--error-hue), var(--error-saturation), var(--error-lightness), 0.1);
+  box-shadow: var(--shadow-focus-ring-error);
 }
-
-/* Disabled variant */
 .input--disabled {
   cursor: not-allowed;
   opacity: 0.6;
   background-color: var(--color-bg-2);
 }
-
-/* Focus state - uses action colors */
 .input:focus {
   outline-color: var(--color-action-primary);
-  box-shadow: 0 0 0 3px hsla(var(--accent-hue), var(--accent-saturation), var(--accent-lightness), 0.1);
+  box-shadow: var(--shadow-focus-ring);
 }
-
-/* Hover state */
 .input:hover:not(:disabled):not(.input--error) {
   outline-color: var(--color-action-primary-hover);
 }
@@ -86,33 +157,24 @@
   color: var(--color-foreground-2);
   opacity: 0.7;
 }
-
-/* Icon spacing */
 .input--has-icon-left {
   padding-left: var(--spacing-10);
 }
-
 .input--has-icon-right {
   padding-right: var(--spacing-10);
 }
-
 .input--sm.input--has-icon-left {
   padding-left: var(--spacing-8);
 }
-
 .input--sm.input--has-icon-right {
   padding-right: var(--spacing-8);
 }
-
 .input--lg.input--has-icon-left {
   padding-left: var(--spacing-12);
 }
-
 .input--lg.input--has-icon-right {
   padding-right: var(--spacing-12);
 }
-
-/* Icons */
 .input__icon {
   position: absolute;
   display: flex;
@@ -121,11 +183,9 @@
   color: var(--color-foreground-2);
   pointer-events: none;
 }
-
 .input__icon--left {
   left: var(--spacing-3);
 }
-
 .input__icon--right {
   right: var(--spacing-3);
   pointer-events: auto;
@@ -136,45 +196,33 @@
   border-radius: var(--radius-sm);
   transition: background-color var(--transition-fast);
 }
-
 .input__icon--right:hover:not(:disabled) {
   background-color: var(--color-bg-3);
   color: var(--color-action-primary-hover);
 }
-
 .input__icon--right:active:not(:disabled) {
   background-color: var(--color-bg-2);
   color: var(--color-action-primary-active);
 }
-
 .input__icon--right:disabled {
   cursor: not-allowed;
   opacity: 0.6;
 }
-
-/* Focus on icon (for password toggle) */
 .input__icon--right:focus-visible {
   outline: 2px solid var(--color-action-primary);
   outline-offset: 2px;
 }
-
-/* Messages */
 .input__message {
   font-size: var(--font-size-sm);
   margin: 0;
   color: var(--color-foreground-2);
 }
-
 .input__message--error {
   color: hsla(var(--error-hue), var(--error-saturation), 60%, 1);
 }
-
-/* Dark theme adjustments */
-:root[data-theme="dark"] .input {
+:root[data-theme=dark] .input {
   background-color: var(--color-bg-2);
 }
-
-/* Autofill styles */
 .input:-webkit-autofill,
 .input:-webkit-autofill:hover,
 .input:-webkit-autofill:focus {
@@ -182,44 +230,34 @@
   -webkit-box-shadow: 0 0 0 1000px var(--color-bg-1) inset;
   transition: background-color 5000s ease-in-out 0s;
 }
-
-:root[data-theme="dark"] .input:-webkit-autofill,
-:root[data-theme="dark"] .input:-webkit-autofill:hover,
-:root[data-theme="dark"] .input:-webkit-autofill:focus {
+:root[data-theme=dark] .input:-webkit-autofill,
+:root[data-theme=dark] .input:-webkit-autofill:hover,
+:root[data-theme=dark] .input:-webkit-autofill:focus {
   -webkit-box-shadow: 0 0 0 1000px var(--color-bg-2) inset;
 }
-
-/* Hide default webkit search cancel button */
-.input[type="search"]::-webkit-search-cancel-button {
+.input[type=search]::-webkit-search-cancel-button {
   -webkit-appearance: none;
   appearance: none;
 }
-
-/* Date/Time Picker */
 .input__datetime-picker {
   padding: var(--spacing-3);
   min-width: 300px;
 }
-
 .input__datetime-combined {
   display: flex;
   gap: var(--spacing-3);
 }
-
 .input__trigger-wrapper {
   position: relative;
   display: flex;
   align-items: center;
   width: 100%;
 }
-
-/* Date Picker */
 .date-picker {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-2);
 }
-
 .date-picker__header {
   display: flex;
   align-items: center;
@@ -228,7 +266,6 @@
   padding-bottom: var(--spacing-2);
   border-bottom: 1px solid var(--color-foreground-2);
 }
-
 .date-picker__nav {
   background: none;
   border: none;
@@ -239,22 +276,18 @@
   border-radius: var(--radius-sm);
   transition: background-color var(--transition-fast);
 }
-
 .date-picker__nav:hover:not(:disabled) {
   background-color: var(--color-bg-3);
 }
-
 .date-picker__nav:disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }
-
 .date-picker__title {
   display: flex;
   gap: var(--spacing-2);
   align-items: center;
 }
-
 .date-picker__select {
   background-color: var(--color-bg-1);
   color: var(--color-foreground-1);
@@ -264,14 +297,12 @@
   font-size: var(--font-size-sm);
   cursor: pointer;
 }
-
 .date-picker__weekdays {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   gap: var(--spacing-1);
   margin-top: var(--spacing-2);
 }
-
 .date-picker__weekday {
   text-align: center;
   font-size: var(--font-size-xs);
@@ -279,13 +310,11 @@
   color: var(--color-foreground-2);
   padding: var(--spacing-1);
 }
-
 .date-picker__days {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   gap: var(--spacing-1);
 }
-
 .date-picker__day {
   aspect-ratio: 1;
   background: none;
@@ -297,41 +326,33 @@
   transition: background-color var(--transition-fast);
   padding: var(--spacing-1);
 }
-
 .date-picker__day:hover:not(:disabled):not(.date-picker__day--empty) {
   background-color: var(--color-bg-3);
 }
-
 .date-picker__day--selected {
-  background-color: var(--color-action-primary) ;
+  background-color: var(--color-action-primary);
   color: white;
   font-weight: 600;
 }
-
 .date-picker__day--empty {
   cursor: default;
   visibility: hidden;
 }
-
 .date-picker__day:disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }
-
-/* Time Picker */
 .time-picker {
   display: flex;
   gap: var(--spacing-2);
   min-width: 240px;
 }
-
 .time-picker__column {
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: var(--spacing-1);
 }
-
 .time-picker__label {
   text-align: center;
   font-size: var(--font-size-xs);
@@ -339,29 +360,12 @@
   color: var(--color-foreground-2);
   padding: var(--spacing-1);
 }
-
 .time-picker__scroll {
   max-height: 200px;
   overflow-y: auto;
-  /* border: 1px solid var(--color-bg-3); */
   border-radius: var(--radius-sm);
-  scrollbar-width: thin;
   background: var(--color-bg-2);
-} 
-/*
-.time-picker__scroll::-webkit-scrollbar {
-  width: 6px;
-}
-
-.time-picker__scroll::-webkit-scrollbar-track {
-  background: var(--color-bg-2);
-}
-*/
-.time-picker__scroll::-webkit-scrollbar-thumb {
-  /* background: var(--color-foreground-2); */
-  border-radius: var(--radius-sm);
 }
-
 .time-picker__item {
   width: 100%;
   background: none;
@@ -374,20 +378,103 @@
   text-align: center;
   font-variant-numeric: tabular-nums;
 }
-
 .time-picker__item:hover:not(:disabled) {
   background-color: var(--color-bg-3);
 }
-
 .time-picker__item--selected {
-  background-color: var(--color-action-primary) ;
+  background-color: var(--color-action-primary);
   color: white;
   font-weight: 600;
 }
-
 .time-picker__item:disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }
 
-
+/* src/style/components/popover/popover.css */
+.popover {
+  position: fixed;
+  background: var(--color-bg-1);
+  border-radius: var(--radius-base);
+  outline: 2px solid var(--color-bg-3);
+  outline-offset: -2px;
+  box-shadow: var(--shadow-md);
+  z-index: var(--z-popover);
+  min-width: 200px;
+  margin-top: var(--spacing-1);
+  animation: popover-slide-in var(--transition-base, 0.2s ease);
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+.popover--top {
+  animation: popover-slide-in-top var(--transition-base, 0.2s ease);
+  margin-bottom: var(--spacing-2);
+}
+.popover--bottom {
+  animation: popover-slide-in-bottom var(--transition-base, 0.2s ease);
+  margin-top: var(--spacing-2);
+}
+.popover--left {
+  animation: popover-slide-in-left var(--transition-base, 0.2s ease);
+  margin-right: var(--spacing-2);
+}
+.popover--right {
+  animation: popover-slide-in-right var(--transition-base, 0.2s ease);
+  margin-left: var(--spacing-2);
+}
+.popover:hover {
+  outline: 2px solid var(--color-primary-hover);
+}
+@keyframes popover-slide-in {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes popover-slide-in-top {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes popover-slide-in-bottom {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes popover-slide-in-left {
+  from {
+    opacity: 0;
+    transform: translateX(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes popover-slide-in-right {
+  from {
+    opacity: 0;
+    transform: translateX(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+.popover__content {
+}

package/dist/components/input.d.mts

@@ -0,0 +1,114 @@
+import * as React from 'react';
+import React__default from 'react';
+
+interface InputFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
+    /**
+     * Input native type (text, email, password, etc.)
+     */
+    type?: string;
+    /**
+     * Label text
+     */
+    label?: string;
+    /**
+     * Helper text shown below the input
+     */
+    helperText?: string;
+    /**
+     * Error message - when present, input is in error state
+     */
+    error?: string;
+    /**
+     * Icon name from our icon library (shown on the left)
+     */
+    icon?: string;
+    /**
+     * Icon name for the right side
+     */
+    iconRight?: string;
+    /**
+     * Full width input
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Size variant
+     * @default 'md'
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Custom class name
+     */
+    className?: string;
+    /**
+     * Right icon click handler
+     */
+    onRightIconClick?: () => void;
+}
+
+type InputType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' | 'date' | 'time' | 'datetime-local';
+interface InputProps extends Omit<InputFieldProps, 'type' | 'iconRight' | 'onRightIconClick'> {
+    /**
+     * Input type with extended support for date/time pickers
+     * @default 'text'
+     */
+    type?: InputType;
+    /**
+     * Show milliseconds in time picker (only for time type)
+     * @default false
+     */
+    showMilliseconds?: boolean;
+    /**
+     * Minute step in time picker (only for time type)
+     * @default 1
+     */
+    minuteStep?: 1 | 5 | 15 | 30;
+    /**
+     * Show clear button for search inputs when they have value
+     * @default true
+     */
+    showClear?: boolean;
+}
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+
+interface InputTextProps extends Omit<InputProps, 'type'> {
+}
+declare const InputText: React__default.ForwardRefExoticComponent<InputTextProps & React__default.RefAttributes<HTMLInputElement>>;
+
+interface InputEmailProps extends Omit<InputProps, 'type'> {
+}
+declare const InputEmail: React__default.ForwardRefExoticComponent<InputEmailProps & React__default.RefAttributes<HTMLInputElement>>;
+
+interface InputPasswordProps extends Omit<InputProps, 'type'> {
+}
+declare const InputPassword: React__default.ForwardRefExoticComponent<InputPasswordProps & React__default.RefAttributes<HTMLInputElement>>;
+
+interface InputSearchProps extends Omit<InputProps, 'type'> {
+}
+declare const InputSearch: React__default.ForwardRefExoticComponent<InputSearchProps & React__default.RefAttributes<HTMLInputElement>>;
+
+interface InputTelProps extends Omit<InputProps, 'type'> {
+}
+declare const InputTel: React__default.ForwardRefExoticComponent<InputTelProps & React__default.RefAttributes<HTMLInputElement>>;
+
+interface InputUrlProps extends Omit<InputProps, 'type'> {
+}
+declare const InputUrl: React__default.ForwardRefExoticComponent<InputUrlProps & React__default.RefAttributes<HTMLInputElement>>;
+
+interface InputNumberProps extends Omit<InputProps, 'type'> {
+}
+declare const InputNumber: React__default.ForwardRefExoticComponent<InputNumberProps & React__default.RefAttributes<HTMLInputElement>>;
+
+interface InputDateProps extends Omit<InputProps, 'type'> {
+}
+declare const InputDate: React__default.ForwardRefExoticComponent<InputDateProps & React__default.RefAttributes<HTMLInputElement>>;
+
+interface InputTimeProps extends Omit<InputProps, 'type'> {
+}
+declare const InputTime: React__default.ForwardRefExoticComponent<InputTimeProps & React__default.RefAttributes<HTMLInputElement>>;
+
+interface InputDateTimeProps extends Omit<InputProps, 'type'> {
+}
+declare const InputDateTime: React__default.ForwardRefExoticComponent<InputDateTimeProps & React__default.RefAttributes<HTMLInputElement>>;
+
+export { Input, InputDate, type InputDateProps, InputDateTime, type InputDateTimeProps, InputEmail, type InputEmailProps, InputNumber, type InputNumberProps, InputPassword, type InputPasswordProps, type InputProps, InputSearch, type InputSearchProps, InputTel, type InputTelProps, InputText, type InputTextProps, InputTime, type InputTimeProps, type InputType, InputUrl, type InputUrlProps };