@fewbox/den-web 0.2.0-preview.13 → 0.2.0-preview.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fewbox/den-web",
-  "version": "0.2.0-preview.13",
+  "version": "0.2.0-preview.14",
   "main": "index.js",
   "types": "index-web.d.ts",
   "repository": "https://github.com/FewBox/fewbox-den.git",

package/src/components/Engine/index.d.ts

@@ -103,6 +103,11 @@ export type GapType = typeof GapType[keyof typeof GapType];
 export type FullGapType = GapType | Property.Gap;
 export declare const LetterSpacingType: {
     readonly Default: "letter-spacing";
+    readonly Normal: "letter-spacing-normal";
+    readonly ExtraSmall: "letter-spacing-extra-small";
+    readonly Small: "letter-spacing-small";
+    readonly Large: "letter-spacing-large";
+    readonly ExtraLarge: "letter-spacing-extra-large";
 };
 export type LetterSpacingType = typeof LetterSpacingType[keyof typeof LetterSpacingType];
 export type FullLetterSpacingType = LetterSpacingType | Property.LetterSpacing;
@@ -298,4 +303,4 @@ export declare const DirectionType: {
     readonly LeftRight: "left-right";
 };
 export type DirectionType = typeof DirectionType[keyof typeof DirectionType];
-export declare const getGeneratedClassName: (className: string, isDefaultValue: boolean | undefined, sizeType?: FullFontSizeType, isAutoSize?: boolean, weightType?: FontWeightType, frontColorType?: FullColorType, backgroundColorType?: FullColorType, borderColorType?: FullColorType, borderDirection?: DirectionType, pseudoType?: PseudoType, pseudoFrontColor?: FullColorType, pseudoBackgroundColor?: FullColorType, pseudoBorderColor?: FullColorType, pseudoBorderDirection?: DirectionType, borderRadius?: FullBorderRadiusType, borderStyle?: FullBorderStyleType, borderWidth?: FullBorderWidthType, padding?: FullPaddingType, margin?: FullMarginType, opacityType?: FullOpacityType, display?: FullDisplayType, visibility?: FullVisibilityType, cursor?: FullCursorType, overflow?: FullOverflowType, overflowX?: FullOverflowXType, overflowY?: FullOverflowYType) => string;
+export declare const getGeneratedClassName: (className: string, isDefaultValue: boolean | undefined, sizeType?: FullFontSizeType, isAutoSize?: boolean, weightType?: FontWeightType, frontColorType?: FullColorType, backgroundColorType?: FullColorType, borderColorType?: FullColorType, borderDirection?: DirectionType, pseudoType?: PseudoType, pseudoFrontColor?: FullColorType, pseudoBackgroundColor?: FullColorType, pseudoBorderColor?: FullColorType, pseudoBorderDirection?: DirectionType, borderRadius?: FullBorderRadiusType, borderStyle?: FullBorderStyleType, borderWidth?: FullBorderWidthType, padding?: FullPaddingType, margin?: FullMarginType, opacityType?: FullOpacityType, display?: FullDisplayType, visibility?: FullVisibilityType, cursor?: FullCursorType, overflow?: FullOverflowType, overflowX?: FullOverflowXType, overflowY?: FullOverflowYType, letterSpacing?: FullLetterSpacingType) => string;

package/templates/.claude/skills/fewbox-den/SKILL.md

@@ -168,7 +168,7 @@ MarginType.Default | .Normal | .ExtraSmall | .Small | .Large | .ExtraLarge
 GapType.Default | .Normal | .ExtraSmall | .Small | .Large | .ExtraLarge
 
 // Letter Spacing
-LetterSpacingType.Default
+LetterSpacingType.Default | .Normal | .ExtraSmall | .Small | .Large | .ExtraLarge
 
 // Opacity
 OpacityType._0 | ._10 | ._20 | ._25 | ._30 | ._40 | ._50 | ._60 | ._70 | ._75 | ._80 | ._90 | ._100
@@ -754,7 +754,14 @@ const [value, setValue] = useState('');
   downIcon={<DownArrowIcon />}   // required
   upIcon={<UpArrowIcon />}       // required
   enableClear
+  readOnly                        // renders as VLabel (non-interactive)
+  isSelectOnly                    // prevents manual typing, only allows selection from items
+  menuGap="4px"                   // gap between dropdown menu and trigger
+  menuBackgroundColor={Den.Components.ColorType.White}
+  menuZIndex={9999}
   handleChange={(value) => console.log(value)}
+  overWriteDropdownMenu={(items) => <CustomMenu items={items} />}   // custom menu renderer
+  overWriteDropdownItem={(item) => <CustomItem item={item} />}      // custom item renderer
 />
 // IDropdownItemData: { caption: string; value: string; icon?: JSX.Element }
 

package/templates/style/_core.scss

@@ -302,6 +302,12 @@ $border-positions: "all", "top", "right", "bottom", "left", "except-top", "excep
         gap: var(#{v.$var-prefix}gap-#{$gap});
     }
 }
+/* letter-spacing */
+@each $letter-spacing, $value in v.$letter-spacings {
+    .letter-spacing-#{$letter-spacing} {
+        letter-spacing: var(#{v.$var-prefix}letter-spacing-#{$letter-spacing});
+    }
+}
 /* padding */
 @each $padding, $value in v.$paddings {
     .padding-#{$padding} {

package/templates/style/_root-properties.scss

@@ -75,6 +75,9 @@
     #{v.$var-prefix}font-size: #{v.$font-size};
     #{v.$var-prefix}line-height: #{v.$line-height};
     #{v.$var-prefix}letter-spacing: #{v.$letter-spacing};
+    @each $letter-spacing, $value in v.$letter-spacings {
+        #{v.$var-prefix}letter-spacing-#{$letter-spacing}: #{$value};
+    }
     #{v.$var-prefix}padding: #{v.$padding};
     #{v.$var-prefix}margin: #{v.$margin};
     #{v.$var-prefix}box-sizing: #{v.$box-sizing};

package/templates/style/_variables.scss

@@ -252,6 +252,18 @@ $scrollbar-radius: 8px;
 /*------------------*/
 $line-height: 1.4;
 $letter-spacing: 0.01em;
+$letter-spacing-normal: 0.05em;
+$letter-spacing-extra-small: $letter-spacing-normal * 0.5;
+$letter-spacing-small: $letter-spacing-normal * 0.8;
+$letter-spacing-large: $letter-spacing-normal * 1.4;
+$letter-spacing-extra-large: $letter-spacing-normal * 2.4;
+$letter-spacings: (
+    "normal": $letter-spacing-normal,
+    "extra-small": $letter-spacing-extra-small,
+    "small": $letter-spacing-small,
+    "large": $letter-spacing-large,
+    "extra-large": $letter-spacing-extra-large,
+);
 $font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",
     "Segoe UI Emoji", "Segoe UI Symbol";
 $font-size: 1em; // 16px * 0.875 = 14px;