@skewedaspect/sleekspace-ui 0.2.0-beta.1

package/src/styles/components/_field.scss

@@ -0,0 +1,87 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Field Component Styles
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-field
+{
+    display: flex;
+    flex-direction: column;
+    gap: var(--sk-space-xs);
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Label positioning
+    //------------------------------------------------------------------------------------------------------------------
+
+    &.sk-label-top
+    {
+        flex-direction: column;
+    }
+
+    &.sk-label-left
+    {
+        flex-direction: row;
+        align-items: flex-start;
+        gap: var(--sk-space-md);
+
+        .sk-field-label
+        {
+            flex-shrink: 0;
+            min-width: 120px;
+            padding-top: var(--sk-space-xs);
+        }
+
+        .sk-field-input-wrapper
+        {
+            flex: 1;
+        }
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-field-label
+{
+    display: block;
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--sk-neutral-text);
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-field-required
+{
+    color: var(--sk-danger-base);
+    margin-left: 0.25rem;
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-field-input-wrapper
+{
+    display: flex;
+    flex-direction: column;
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-field-description
+{
+    margin: 0;
+    font-size: 0.75rem;
+    color: color-mix(in oklch, var(--sk-neutral-text), transparent 30%);
+    line-height: 1.4;
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-field-error
+{
+    margin: 0;
+    font-size: 0.75rem;
+    color: var(--sk-danger-base);
+    font-weight: 500;
+    line-height: 1.4;
+}
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/styles/components/_group.scss

@@ -0,0 +1,138 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Group Component Styles
+//----------------------------------------------------------------------------------------------------------------------
+
+@use '../theme/variables' as *;
+@use '../mixins' as *;
+
+//----------------------------------------------------------------------------------------------------------------------
+// Base Group Styles
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-group
+{
+    // Base styles
+    display: inline-flex;
+    align-items: stretch;
+
+    // Horizontal orientation (default)
+    &.sk-horizontal
+    {
+        flex-direction: row;
+
+        // Remove gaps between children
+        > *
+        {
+            flex-shrink: 0;
+        }
+
+        // Remove left border and corner shape from all but first child
+        > * + *
+        {
+            margin-left: calc(-1 * var(--sk-border-width, 1px));
+        }
+
+        // First child keeps only left corners
+        > *:first-child:not(:only-child)
+        {
+            @supports (corner-shape: bevel)
+            {
+                corner-shape: bevel;
+                border-start-end-radius: 0;
+                border-end-end-radius: 0;
+            }
+        }
+
+        // Middle children have no beveled corners
+        > *:not(:first-child):not(:last-child)
+        {
+            @supports (corner-shape: bevel)
+            {
+                corner-shape: initial;
+                border-radius: 0;
+            }
+
+            @supports not (corner-shape: bevel)
+            {
+                border-radius: 0;
+            }
+        }
+
+        // Last child keeps only right corners
+        > *:last-child:not(:only-child)
+        {
+            @supports (corner-shape: bevel)
+            {
+                corner-shape: bevel;
+                border-start-start-radius: 0;
+                border-end-start-radius: 0;
+            }
+        }
+    }
+
+    // Vertical orientation
+    &.sk-vertical
+    {
+        flex-direction: column;
+
+        // Remove gaps between children
+        > *
+        {
+            flex-shrink: 0;
+            width: 100%;
+        }
+
+        // Remove top border from all but first child
+        > * + *
+        {
+            margin-top: calc(-1 * var(--sk-border-width, 1px));
+        }
+
+        // First child keeps only top corners
+        > *:first-child:not(:only-child)
+        {
+            @supports (corner-shape: bevel)
+            {
+                corner-shape: bevel;
+                border-end-start-radius: 0;
+                border-end-end-radius: 0;
+            }
+        }
+
+        // Middle children have no beveled corners
+        > *:not(:first-child):not(:last-child)
+        {
+            @supports (corner-shape: bevel)
+            {
+                corner-shape: initial;
+                border-radius: 0;
+            }
+
+            @supports not (corner-shape: bevel)
+            {
+                border-radius: 0;
+            }
+        }
+
+        // Last child keeps only bottom corners
+        > *:last-child:not(:only-child)
+        {
+            @supports (corner-shape: bevel)
+            {
+                corner-shape: bevel;
+                border-start-start-radius: 0;
+                border-start-end-radius: 0;
+            }
+        }
+    }
+
+    // Ensure grouped items have higher z-index on hover
+    > *:hover,
+    > *:focus-within
+    {
+        position: relative;
+        z-index: 1;
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/styles/components/_index.scss

@@ -0,0 +1,46 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Components Layer - Main Import
+//----------------------------------------------------------------------------------------------------------------------
+
+@use 'sass:meta';
+
+@layer components
+{
+    @include meta.load-css('accordion');
+    @include meta.load-css('alert');
+    @include meta.load-css('avatar');
+    @include meta.load-css('breadcrumbs');
+    @include meta.load-css('button');
+    @include meta.load-css('card');
+    @include meta.load-css('checkbox');
+    @include meta.load-css('collapsible');
+    @include meta.load-css('divider');
+    @include meta.load-css('field');
+    @include meta.load-css('group');
+    @include meta.load-css('input');
+    @include meta.load-css('listbox');
+    @include meta.load-css('menu');
+    @include meta.load-css('modal');
+    @include meta.load-css('navbar');
+    @include meta.load-css('number-input');
+    @include meta.load-css('page');
+    @include meta.load-css('pagination');
+    @include meta.load-css('panel');
+    @include meta.load-css('popover');
+    @include meta.load-css('progress');
+    @include meta.load-css('radio');
+    @include meta.load-css('sidebar');
+    @include meta.load-css('skeleton');
+    @include meta.load-css('slider');
+    @include meta.load-css('spinner');
+    @include meta.load-css('switch');
+    @include meta.load-css('table');
+    @include meta.load-css('tabs');
+    @include meta.load-css('tag');
+    @include meta.load-css('tags-input');
+    @include meta.load-css('textarea');
+    @include meta.load-css('toast');
+    @include meta.load-css('tooltip');
+}
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/styles/components/_input.scss

@@ -0,0 +1,205 @@
+@use '@/styles/mixins/cut-border' as *;
+
+//----------------------------------------------------------------------------------------------------------------------
+// Input Component Styles
+//----------------------------------------------------------------------------------------------------------------------
+
+.sk-input
+{
+    // Color tokens (can be overridden by custom colors)
+    --sk-input-color-base: var(--sk-neutral-base);
+    --sk-input-fg: var(--sk-neutral-text);
+
+    // Corner cut size (scales with size variant)
+    --sk-input-cut: 0.5rem;
+
+    display: block;
+    width: 100%;
+    font-family: var(--sk-font-family-base);
+    cursor: text;
+
+    @include cut-border(
+        $cut: var(--sk-input-cut),
+        $corners: (top-right)
+    );
+
+    // Base styling
+    background: color-mix(
+        in oklch,
+        color-mix(in oklch, var(--sk-input-color-base) 75%, transparent 25%),
+        #000 65%
+    );
+    color: var(--sk-input-fg);
+    border: var(--sk-border-width-thin) solid var(--sk-input-color-base);
+
+    // Transitions
+    transition-property: background, color, border-color, box-shadow;
+    transition-duration: var(--sk-transition-duration-base);
+
+    // Size variants (match button heights)
+    &.sk-sm
+    {
+        height: 2rem;
+        padding: 0 var(--sk-space-sm);
+        font-size: 0.875rem;
+        --sk-input-cut: 0.4rem;
+    }
+
+    &.sk-md
+    {
+        height: 2.5rem;
+        padding: 0 var(--sk-space-md);
+        font-size: 1rem;
+        --sk-input-cut: 0.5rem;
+    }
+
+    &.sk-lg
+    {
+        height: 3rem;
+        padding: 0 var(--sk-space-md);
+        font-size: 1.125rem;
+        --sk-input-cut: 0.6rem;
+    }
+
+    &.sk-xl
+    {
+        height: 3.5rem;
+        padding: 0 var(--sk-space-md);
+        font-size: 1.25rem;
+        --sk-input-cut: 0.7rem;
+    }
+
+    // Focus state (brighter background)
+    &:focus
+    {
+        outline: none;
+        border-color: color-mix(in oklch, var(--sk-input-color-base), white 35%);
+        background: color-mix(
+            in oklch,
+            color-mix(in oklch, var(--sk-input-color-base) 75%, transparent 25%),
+            #000 25%
+        );
+        transition-duration: var(--sk-transition-duration-fast);
+    }
+
+    // Hover state (slightly brighter)
+    &:hover:not(:disabled):not(:focus)
+    {
+        border-color: color-mix(in oklch, var(--sk-input-color-base), white 20%);
+        transition-duration: var(--sk-transition-duration-fast);
+    }
+
+    // Disabled state
+    &:disabled
+    {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+
+    // Readonly state
+    &.sk-readonly
+    {
+        cursor: default;
+        opacity: 0.75;
+    }
+
+    // Placeholder styling
+    &::placeholder
+    {
+        color: color-mix(in oklch, var(--sk-input-fg), transparent 50%);
+    }
+
+    // Kind variants
+    &.sk-neutral
+    {
+        --sk-input-color-base: var(--sk-neutral-base);
+        --sk-input-fg: var(--sk-neutral-text);
+    }
+
+    &.sk-primary
+    {
+        --sk-input-color-base: var(--sk-primary-base);
+        --sk-input-fg: var(--sk-primary-text);
+    }
+
+    &.sk-accent
+    {
+        --sk-input-color-base: var(--sk-accent-base);
+        --sk-input-fg: var(--sk-accent-text);
+    }
+
+    &.sk-info
+    {
+        --sk-input-color-base: var(--sk-info-base);
+        --sk-input-fg: var(--sk-info-text);
+    }
+
+    &.sk-success
+    {
+        --sk-input-color-base: var(--sk-success-base);
+        --sk-input-fg: var(--sk-success-text);
+    }
+
+    &.sk-warning
+    {
+        --sk-input-color-base: var(--sk-warning-base);
+        --sk-input-fg: var(--sk-warning-text);
+    }
+
+    &.sk-danger
+    {
+        --sk-input-color-base: var(--sk-danger-base);
+        --sk-input-fg: var(--sk-danger-text);
+    }
+
+    // Color kinds (direct palette access)
+    &.sk-neon-blue
+    {
+        --sk-input-color-base: var(--sk-neon-blue-base);
+        --sk-input-fg: var(--sk-neon-blue-text);
+    }
+
+    &.sk-neon-purple
+    {
+        --sk-input-color-base: var(--sk-neon-purple-base);
+        --sk-input-fg: var(--sk-neon-purple-text);
+    }
+
+    &.sk-neon-orange
+    {
+        --sk-input-color-base: var(--sk-neon-orange-base);
+        --sk-input-fg: var(--sk-neon-orange-text);
+    }
+
+    &.sk-neon-green
+    {
+        --sk-input-color-base: var(--sk-neon-green-base);
+        --sk-input-fg: var(--sk-neon-green-text);
+    }
+
+    &.sk-neon-mint
+    {
+        --sk-input-color-base: var(--sk-neon-mint-base);
+        --sk-input-fg: var(--sk-neon-mint-text);
+    }
+
+    &.sk-neon-pink
+    {
+        --sk-input-color-base: var(--sk-neon-pink-base);
+        --sk-input-fg: var(--sk-neon-pink-text);
+    }
+
+    &.sk-yellow
+    {
+        --sk-input-color-base: var(--sk-yellow-base);
+        --sk-input-fg: var(--sk-yellow-text);
+    }
+
+    &.sk-red
+    {
+        --sk-input-color-base: var(--sk-red-base);
+        --sk-input-fg: var(--sk-red-text);
+    }
+}
+
+//----------------------------------------------------------------------------------------------------------------------